时间戳

首页 > 解决方案 > 添加事件时，我的 React-Redux 项目输出错误

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

问题描述

我的 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}
        />
    )
})

此外，错误仅显示在我取消注释事件行的位置。是什么导致了错误，我该如何解决？

标签： reactjsreact-redux

解决方案

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

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

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

推荐阅读