唯一键是唯一的，已分配给 key prop，但仍然出现错误...但仅在一个组件中

Question

在我的主 App 渲染函数中...我生成了这个列表。

    const buildings = this.state.buildings.map(buildingData=>
      {
       console.log("unique id is:", buildingData.id) 
      return(
        <Building 
          key={buildingData.id}
          name ={buildingData.name}
          handleBuildingBuy={this.handleBuildingBuy}
          buyPrice={buildingData.buyPrice}
          count = {buildingData.count}
          subjectsOfIncrease = {buildingData.subjectsOfIncrease}
          isBuyable = {buildingData.isBuyable}
          isUnlocked = {buildingData.isUnlocked}

        />)
    });

但我仍然收到控制台输出错误，即使每个键都是已定义且唯一的......

App.js:224 unique id is: 0
App.js:224 unique id is: 1
App.js:224 unique id is: 2
App.js:224 unique id is: 3
App.js:224 unique id is: 4
App.js:224 unique id is: 5
App.js:224 unique id is: 6
App.js:224 unique id is: 7
index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Building`. See react-warning-keys for more information.
    in div (at Building.js:11)
    in Building (at App.js:226)
    in div (at App.js:275)
    in div (at App.js:274)
    in App (at src/index.js:8)

更奇怪的是，我对其他事情也有类似的循环，其中 key 的行为并不奇怪。

    const resources = this.state.resources.map(resourceData=>
      {
       console.log("unique resourceName is:", resourceData.name) 

        return(

        <Resource 
          name ={resourceData.name}
          max = {resourceData.max}
          isUnlocked = {resourceData.isUnlocked}
          changePerTick = {resourceData.changePerTick}
          amount={resourceData.amount}
          key={resourceData.name} //change out to a number - names are in fact unique. 

        />)
    });   

那个输出是：

unique resourceName is: grey
App.js:240 unique resourceName is: red
App.js:240 unique resourceName is: green
App.js:240 unique resourceName is: blue
App.js:240 unique resourceName is: purple
App.js:240 unique resourceName is: teal
App.js:240 unique resourceName is: orange

所以我不明白为什么上面的内容在同一页面中不起作用。

任何人都可以阐明可能发生的事情吗？

编辑：如果它是相关的，建筑组件

function Building(props)
    {
    if(props.isUnlocked)
        {
        const buyClass = props.isBuyable ? "afford": "cantAfford";  
        const PriceList = props.buyPrice.map(price=>
            {
            return(
                <div>
                    {price.name}: {price.cost}  
                </div>
            )
        })  

        return(

        <div className="building">
            <div className="buildingTitle"> BUY FOR:

                <div className={buyClass}>{PriceList}</div> 

            </div>
             <div className="buildingBuyContainer">
                {props.isBuyable ? 
                    <button name={props.name} onClick={props.handleBuildingBuy} className="buildingBuyBTN">{props.name}</button>
                    :
                    <button name={props.name} className="buildingNoBuyBTN">{props.name}</button>
                }
            </div>
            <div className="counter"> COUNT:{props.count}
        </div>
        </div>

        )
    }
    else{return null}
}

Answer 1

您的错误确实在构建中。您没有向价目表添加键。这需要一把钥匙

      const PriceList = props.buyPrice.map(price=>
            {
            return(
                <div>
                    {price.name}: {price.cost}  
                </div>
            )
        })  

它给你的错误是把你指向正确的地方

Answer 2

如错误消息所示，问题出在您的<Building> 组件中：

查看Building的渲染方法。

它甚至告诉你在哪里：

在 div 中（在 Building.js:11）

尽管进行了英勇的调试工作！

eta：如果您的 buyPrice 数组不会更改，那么修复很简单：

const PriceList = props.buyPrice.map((price,index)=>
            {
            return(
                <div key={index}>
                    {price.name}: {price.cost}  
                </div>
            )
        })