主页 / 问题 / 1184773
Accepted
MrYogurt
Asked:2020-10-01 19:12:53 +0000 UTC2020-10-01 19:12:53 +0000 UTC

键错误

  • 772

有这个代码：

function ElementList(props) {
    let names = props.names;
    let listItems = names.map((name) =>
        <Element key={name.name} />
    );
    return (
        {listItems}
    );
}

let names = [
    {id: 0, name: 'name1'},
    {id: 1, name: 'name2'},
    {id: 2, name: 'name3'},
];

class Show extends React.Component {

    render() {
        return (
            <div>
                <ElementList names={names}/>
            </div>
        );
    }
}

我收到一个错误：对象作为 React 子项无效（找到：带有键 {listItems} 的对象）。如果您打算渲染一组子项，请改用数组。老实说，我不明白它想从我这里得到什么。

reactjs

2 个回答

  1. 键是创建元素列表时必须指定的特殊字符串属性。你可以在这里阅读更多 Keys 帮助 React 确定哪些元素已被更改、添加或删除。需要指定它们，以便 React 可以随着时间的推移匹配数组元素

    • 1
  2. Best Answer

    我自己想通了，我不得不移动 listItems 表达式来返回：

    function ElementList(props) {
    let names = props.names;
    return (
        names.map((name) =>
            <Element key={name}/>
    ));
}
    • 1

相关问题