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

Question

within my main App render function... I have this list generated.

    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}

        />)
    });

but I still get the console output error, even though each key is both defined and unique....

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)

weirder still I have a similar loop for other things, where key is not acting weird.

    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. 

        />)
    });   

and that output is:

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

so I don't understand why the above isn't working while in the same page the below is.

can anyone shed any light as to what may be happening?

edit: in case it is relevant, the building component

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

Your error is indeed in building. You are not adding keys to the PriceList. This needs a key

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

The error it gave you was pointing you in the correct place

Answer 2

As indicated by the error message, the problem is within your <Building> component:

Check the render method of Building .

It even tells you where:

in div (at Building.js:11)

Valiant debugging efforts though!

eta: If your buyPrice array isn't going to change, the fix is straightforward:

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