当前位置: 首页 > 面试题库 >

如何在React中循环对象?

司马项明
2023-03-14
问题内容

刚接触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)

问题答案:

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



 类似资料:
  • 我试图从以下JSON对象数据中检索信息。json: 因此,我想循环这个JSON对象,以显示所有可用项及其相应的标题、说明和附件链接。 我知道我可以分别访问它们: 通常我会对数据进行for循环和循环。项目[i]。但是,由于这是一个react和一个对象,而不是一个数组,因此它的工作方式不同。 我当前的代码: 现在它只显示对象的第一个条目(因为它有const项目=data.items[0])我如何循环d

  • 我正在制作一个锦标赛应用程序,其中多个(4,6,或8)的球员将相互匹配。 它是以圆为基础的。因此,如果一共有6名选手,那么将有5轮比赛,每轮比赛有3对选手。每个球员每轮只能出现一次。 我一直在使用for-loops来获得所需的组合,但是我如何将这些对分离成循环,这样它们就不会重复了呢?以下是我到目前为止所做的(制作每一个组合): 有没有什么通用的方法可以将两对组合分配到每一轮比赛中,而不让球员在同

  • 问题内容: 如果我在一个循环中有一个循环,并且一旦满足一条语句,我想中断主循环,那我应该怎么做? 这是我的代码: 问题答案: 使用标记的中断: 另请参阅 Java代码中的“循环:”。 这是什么,为什么会编译? 文献资料

  • 你能帮助我,如何在代码中添加“for”循环吗?目标是从所有注释中只显示3条注释,这些注释是用.map扫描的。 我试着把它放在这里,但我发现它在JSX中不起作用。 或者你会推荐用另一种方式来解决任务?

  • 我想写一个简单的程序,其中使用for循环,它将打印数字从0到10。我正在尝试使用一个for循环,它将打印从0到10的数字,并将道具传递给子组件。下面是我的代码:

  • 这篇文章是关于我在工作中发现的一个有趣的问题。