javascript-如何在React中循环对象?

刚接触React并尝试循环对象属性,但是React抱怨对象不是有效的React子代,有人可以给我一些有关如何解决此问题的建议吗? 我添加了createFragment,但不确定是否需要执行此操作或应该采用哪种方法?

JS

var tifs = {1: 'Joe', 2: 'Jane'};
var tifOptions = Object.keys(tifs).forEach(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

渲染功能

render() {
        const model = this.props.model;

        let tifOptions = {};

        if(model.get('tifs')) {
            tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) {
                return <option value={key}>{this.props.model.get('tifs')[key]}</option>
            });
        }

        return (
            <div class={cellClasses}>

                    <div class="grid__col-5 text--center grid__col--bleed">
                        <h5 class="flush text--uppercase">TIF</h5>
                        <select id="tif" name="tif" onChange={this.handleChange}>
                            {tifOptions}
                        </select>
                    </div>

            </div>
        );
    }

控制台错误

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)
styler asked 2020-08-08T20:13:55Z
3个解决方案
99 votes

问题在于您使用forEach()的方式,因为它将始终返回undefined。您可能正在寻找map()方法,该方法返回一个新数组:

var tifOptions = Object.keys(tifs).map(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

如果您仍然想使用forEach(),则必须执行以下操作:

var tifOptions = [];

Object.keys(tifs).forEach(function(key) {
    tifOptions.push(<option value={key}>{tifs[key]}</option>);
});

更新:

如果您正在编写ES6,则可以使用箭头功能来完成相同的工作:

const tifOptions = Object.keys(tifs).map(key => 
    <option value={key}>{tifs[key]}</option>
)

这是显示上面提到的所有选项的小提琴:[https://jsfiddle.net/fs7sagep/]

tobiasandersen answered 2020-08-08T20:14:18Z
1 votes

您可以按以下更紧凑的方式使用它:

var tifs = {1: 'Joe', 2: 'Jane'};
...

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { Object.entries(tifs).map((t,k) => <option key={k} value={t[0]}>{t[1]}</option>) }          
   </select>
)
Banzy answered 2020-08-08T20:14:38Z
-4 votes

我强烈建议您在执行反应时使用数组而不是对象,这是我经常使用的语法。

const rooms = this.state.array.map((e, i) =>(<div key={i}>{e}</div>))

要使用该元素,只需将{rooms}放在您的jsx中。

其中e =数组元素,i =元素索引。 在这里阅读更多。如果您正在寻找信号,这就是这样做的方法。

alex1997 answered 2020-08-08T20:15:07Z
translate from https://stackoverflow.com:/questions/39965579/how-to-loop-an-object-in-react