Question

我想在React App中插入一个密钥标识符。当前，我的密钥由Object.name属性填充。这是不理想的，因为它可能会被复制，然后React将开始抱怨。服务器不会返回这样的密钥。

因此，我想我将遍历该数组并在我的index参数中使用key。所以，这就是我所做的：

const item = itemsList.map((item, index) => ({
  ...item,
  index
}));

并在我的组件中使用它：

<TableWithSearch
  keyField="item.index"
  data={itemsList}
  columns={getItemsTableColumns()}
  search
>

我认为这很容易理解。但是后来我的应用崩溃了。出现错误：

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

很明显我做错了，但是我一直在看，在过去的1个小时里，仍然无法弄清。

Answer 1

keyField =“ item.index”不正确。您将其作为字符串传递，这就是为什么您看到该错误的原因。每个元素都获得相同的字符串值“ item.index”

应为keyField = {item.index}

Answer 2

好吧，经过几个小时的思考，您的评论和答案以及一些实验之后，我找到了解决方案。

为了更彻底地解释解决方案，我将发布我的整个组件：

export class ItemsList extends Component {
  static propTypes = {
    listItems: PropTypes.func.isRequired
  };

  componentDidMount() {
    const { listItems } = this.props;
    listItems();
  }

  renderGroups() {
    const { itemsList, user } = this.props;
    const items = itemsList.map((item, index) => ({
      ...item,
      index
    }));
    return (
      <Fragment>
        {itemsList.length > 0 ? (
          <Fragment>
            <PageHeader>
              Groups
              <span>({itemsList.length})</span>
            </PageHeader>
            <div className="mb-2">
              <TableWithSearch
                keyField="index"
                data={items}
                columns={getItemsTableColumns()}
                search
              >
              </TableWithSearch>
            </div>
          </Fragment>
        ) : (
            <div>no items</div>
          )}
      </Fragment>
    );
  }

我的错误是我将ListGroups作为数据属性进行传递，这反过来使得该组件完全不可能读取groups数组并获取其索引Ids van der Zee他的评论。

由于某些原因，键属性上的JSX语法不符合你们的建议。我尚未对此进行调查，但是我会在下面发表评论。

以上示例的工作原理很吸引人。如果您知道为什么JSX语法不起作用，请随时发表评论。感谢您的帮助。

在React中无法通过对象数组进行映射

2 个答案: