在 React 中遇到两个具有相同 key 的 children

Question

我目前正在尝试学习如何创建一个网络应用程序来与我编写的以太坊合约进行交互。因此我选择学习如何使用 React 和 Semantic-UI.

我正在处理的页面无法正常工作。由于我不明白的错误，它没有显示 CardGroup：

warning.js?040ca1d:33 Warning: Encountered two children with the same key, `-`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    in div (created by CardGroup)
    in CardGroup (at index.js?entry:30)
    in div (at index.js?entry:37)
    in div (at Layout.js:5)
    in Unknown (at index.js?entry:36)
    in BiddingCreator (created by Container)
    in AppContainer (created by Container)
    in Container (created by App)
    in div (created by App)
    in App

这是我当前的代码：

import React, {Component} from 'react';
import biddingCreator from '../Ethereum/BiddingCreator';
import {Card} from 'semantic-ui-react';
import Layout from '../components/Layout'

const compiledBidding = require('../Ethereum/build/Bidding.json');

class BiddingCreator extends Component{

  static async getInitialProps(){
    const biddings = await biddingCreator.methods.getBiddings().call();

    const items = await biddings.map( async address => {
      var summary = await biddingCreator.methods.viewBidding(address).call();
      console.log(summary);
      console.log(address);
      return {
        header: address,
        description: summary[1],
        meta: address,
        fluid: true
      };

    });

    return { biddings, items};
  }

 renderBiddings(){
    console.log(this.props.items);
    return <Card.Group items={this.props.items} />;
}

  render(){

    return(
      <Layout>
       <div>

    {this.renderBiddings()}
    </div>
    </Layout>
  )
  }
}

export default BiddingCreator;

谁能解释一下我做错了什么以及这个错误是什么意思？

Answer 1

这是 React lists and keys

的常见错误

我已经检查了 Card.Group 的语义-ui-react 源代码，您似乎可以为每个项目添加一个 key 属性，例如

const items = this.props.biddings.map(async (address, index) => {
  var summary = await biddingCreator.methods.viewBidding(address);
  return {
    key: index,
    header: summary[0],
    description: summary[1],
    meta: address,
    fluid: true
  };
});

PS

以下是 Card.Group 生成密钥的方式 const key = item.key || [item.header, item.description].join('-')

在某些情况下，header 和 description 的值似乎为空，这就是为什么您会遇到错误 "Encountered two children with the same key, -"

Answer 2

这是我使用 yuyokk post 中的帮助找到的解决方案：

当我的车试图渲染时，items 仍在等待它的承诺，因此你没有数据，因此没有钥匙。

现在可以使用此代码：

const items =await Promise.all( biddings.map(async address => {

      var summary = await biddingCreator.methods.viewBidding(address).call();
      return {
        header: summary[0],
        description: summary[1],
        meta: address,
        fluid: true
      };
    }));

在 React 中遇到两个具有相同 key 的 children

Encountered two children with the same key in React

reactjs

semantic-ui

solidity

next.js