Question

我正在运行我的reactjs应用程序并在我的控制台中收到警告：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34; 支柱。检查AppointmentsContainer
的渲染方法

我的组件如下所示：

export default class AppointmentsContainer extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        //todo remove
        //debugger;

        let appointments = mockData.data;

        return (
            <div>
                //loop through the appointments
                {appointments.map(function(a,i){
                    //todo remove
                    //console.log('testing=a', a);
                    return <p><Appointment key={i}/></p>
                })}
            </div>
        );
    }
}

我现在正在传递钥匙，但警告仍然出现了吗？我该如何解决这个问题？

Answer 1

您需要将密钥放在p元素中，而不是Appointment。由于Appointment是p的唯一子项，因此不需要密钥。

Answer 2

添加密钥不会执行任何额外功能，但仍然会删除警告，您可以用

替换代码

select id from student where id<='4' order by id DESC limit 2

或者您可以将代码更改为

  return <p  key={i}><Appointment/></p>

在Appointment组件中，您可以将其作为

进行访问

 <div>

                //loop through the appointments
                {appointments.map(function(a,i){
                    //todo remove
                    //console.log('testing=a', a);
                    return <Appointment key={i}/>
                })}

            </div>

如何修复reactjs警告：数组中的每个子节点都应该有一个唯一的prop ...？

2 个答案: