Question

在我的React / Redux项目中，我具有以下无状态功能：

const ListItem = props => {
    return (
        <li className={props.item.expand ? 'expanded' : ''}>
            <img src={`https://someUrl`+props.item.image}
                 alt="Illustration"
                 //onLoad={props.showImage.bind({}, props.item.id)}
                 className={props.item.showIllustration ? 'show' : ''}/>
            <h3 className="title">{props.item.title}</h3>
            <p className="date">
                {moment(props.item.date, "YYYY-MM-DD").format('DD/MM/YY')}
            </p>

            <h3 className="amount">{props.item.amount}</h3>
            <button onClick={props.showItem.bind({}, props.item.id)}>
                {props.item.show ? 'Close' : 'Info'}
            </button>

            {props.item.show ? <ItemDetails id={props.item.id} /> : ''}
        </li>
    )
}

效果很好。但是...当我取消注释//onLoad行时，控制台将输出以下错误：

Warning: Each child in an array or iterator should have a unique "key" prop.

如果已经在父组件上设置了唯一键，我不明白为什么要问这个唯一键：

listItems.map(element => {
    return (
        <ListItem
            key={element.id}
            element={element}
        />
    )
})

此外，仅在取消注释事件行的地方显示错误。是什么原因引起的错误，我该如何解决？

Answer 1

要求它在呈现项目的最顶层元素上具有key属性，在这种情况下为li。原因是ListItem可能是父项，但它只是其render方法中实际html元素的语法占位符。

因此，您必须更改为以下内容：

<li key={props.id} className={props.item.expand ? 'expanded' : ''}>

Answer 2

现在已解决。我发现问题不是在react组件中，而是在reducer中。

当我添加事件时，我的React-Redux项目输出错误

2 个答案: