Reactjs 在React中遇到两个具有相同密钥的子级

我目前正在尝试学习如何创建一个Web应用程序，以便与我编写的以太坊合同进行交互。因此，我选择学习如何使用React和语义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;

import React，{Component}来自'React'；
从“../Ethereum/biddingCreator”导入biddingCreator；
从“语义ui反应”导入{Card}；
从“../components/Layout”导入布局
const compiledbinding=require（'../Ethereum/build/Bidding.json'）；
类BiddingCreator扩展组件{
静态异步getInitialProps（）{
const biddings=await biddingCreator.methods.getBiddings（）.call（）；
const items=等待biddings.map（异步地址=>{
var summary=await biddingCreator.methods.viewBidding（address.call（）；
控制台日志（摘要）；
控制台日志（地址）；
返回{
标题：地址，
说明：摘要[1]，
梅塔：地址，
流体：对
};
});
返回{biddings，items}；
}
RenderBings（）{
console.log（this.props.items）；
返回；
}
render（）{
返回(
{this.renderBings（）}
)
}
}
导出默认的BiddingCreator；

有人能解释一下我做错了什么，这个错误意味着什么吗

这是一个常见的错误

我已经检查了语义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如何生成key

const key=item.key | |[item.header，item.description]。join（'-'）

在某些情况下，

标题和
说明的值似乎为空，这就是为什么您会遇到错误“遇到两个具有相同密钥的子项，
-
”
这是

我已经检查了语义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如何生成key
const key=item.key | |[item.header，item.description]。join（'-'）

在某些情况下，
标题和
说明的值似乎为空，这就是为什么会遇到错误“遇到两个具有相同密钥的孩子，
-
”
以下是我使用yuyokk文章中的帮助找到的解决方案：

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

使用此代码，它现在可以工作：

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
      };
    }));

以下是我使用yuyokk帖子中的帮助找到的解决方案：

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

使用此代码，它现在可以工作：

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
      };
    }));

由于错误似乎源于
CardGroup
，您应该在问题中包含该组件的代码。嗨，Chris，CardGroup来自“语义ui react”的导入{Card}，所以我没有该组件的代码。我遵循了以下文档：由于错误似乎源于
CardGroup
，您应该在问题中包含该组件的代码。嗨，Chris，CardGroup来自“semantic ui react”的导入{Card}，所以我没有该组件的代码。我遵循以下文档：-很抱歉格式化-感谢您的帮助！看来这确实是个问题。。。但我不知道如何解决这个问题。我在我的代码中放了一些console.log（）（我将编辑上面的代码），下面是结果：[Promise{}，Promise{}]Result{'0'：'Apple'，'1'：'200'}0xA6862C523f91852F7d7A7906D7637D55424D270E结果{'0'：'House'，'1'：'200000'}0x95EFb472e4510b894e4385988916Fd142dE315C4生成卡后，等待函数的结果似乎确实到达，这导致了错误。请参阅随附代码。我已经将
key:index
添加到了应该修复问题的对象中，不需要
.call（）
-
方法.getBiddings（）和
方法。查看投标（地址）-抱歉格式化-感谢您的帮助！看来这确实是个问题。。。但我不知道如何解决这个问题。我在我的代码中放了一些console.log（）（我将编辑上面的代码），下面是结果：[Promise{}，Promise{}]Result{'0'：'Apple'，'1'：'200'}0xA6862C523f91852F7d7A7906D7637D55424D270E结果{'0'：'House'，'1'：'200000'}0x95EFb472e4510b894e4385988916Fd142dE315C4生成卡后，等待函数的结果似乎确实到达，这导致了错误。请参阅随附代码。我已经将
key:index
添加到了应该修复问题的对象中，不需要
.call（）
-
方法.getBiddings（）和
方法。查看投标（地址）