如何在React中循环对象？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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)

回答：

问题在于您的使用方式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/

以上是 如何在React中循环对象？ 的全部内容， 来源链接： utcz.com/qa/422530.html

回到顶部