如何在 React 中循环对象？

Question

React 新手并尝试循环 Object 属性，但 React 抱怨 Objects 不是有效的 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)

Answer 1

问题在于您使用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，你可以使用 arrow function 更简洁地完成同样的事情：

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

这是一个显示上述所有选项的小提琴：https://jsfiddle.net/fs7sagep/

Answer 2

您可以以更紧凑的方式使用它：

const 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>
)

还有另一种略有不同的味道：

 Object.entries(tifs).map(([key,value],i) => <option key={i} value={key}>{value}</option>)  

Answer 3

当我将Object.entries 与map 一起使用时，我会像下面这样使用Array Destructuring，然后直接调用它们。

Object.entries(tifs).map(([key, value]) => (
    <div key={key}>{value}</div>
));

Answer 4

你也可以有一个像下面这样的返回 div 并使用 Javascript 的内置模板文字：

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

return(

        <div>
            {Object.keys(tifOptions).map((key)=>(
                <p>{paragraphs[`${key}`]}</p>
            ))}
        </div>
    )

Answer 5

const tifOptions = [];

for (const [key, value] of Object.entries(tifs)) {
    tifOptions.push(<option value={key} key={key}>{value}</option>);
}

return (
   <select id="tif" name="tif" onChange={this.handleChange}>  
      { tifOptions }          
   </select>
)

Answer 6

你可以使用map函数

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

Answer 7

如果你正在做反应迭代，我强烈建议你使用数组而不是对象，这是我经常使用的语法。

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

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

其中 e=数组的元素，i=元素的索引。阅读更多here。 如果您正在寻找迭代，这就是这样做的方法。