javascript - 如何在 React 中循环一个对象？

Question

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)

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

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