Javascript 唯一的关键点是唯一的，分配给关键点道具，但仍然得到错误。。。但仅在一个组件中

在我的主应用程序渲染功能中。。。我已经生成了这个列表

    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}

        />)
    });

更奇怪的是，我在其他事情上也有类似的循环，其中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. 

        />)
    });   

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

有人能解释一下可能发生的事情吗

编辑：如果相关，则为建筑构件

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

功能建筑（道具）
{
如果（道具已解锁）
{
const buyClass=props.isBuyable？“买得起”：“cantfeet”；
const PriceList=props.buyPrice.map（价格=>
{
返回(
{price.name}:{price.cost}
)
})  
返回(
购买价格：
{价格表}
{道具。是否可购买？
{props.name}
:
{props.name}
}
计数：{props.COUNT}
)
}
else{return null}
}

如错误消息所示，问题出在您的

组件中：

检查

建筑的渲染方法

它甚至告诉你在哪里：

分区内（位于Building.js:11）

但是勇敢的调试工作

eta：如果您的

buyPrice

数组不会改变，那么修复方法很简单：

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

const PriceList=props.buyPrice.map（（价格、指数）=>
{
返回(
{price.name}:{price.cost}
)
})  

您的错误确实在建筑中。您没有将密钥添加到价目表中。这需要一把钥匙

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

const PriceList=props.buyPrice.map（price=>
{
返回(
{price.name}:{price.cost}
)
})  

---

它给您的错误指向了正确的位置

问题在

（第11行）-请参阅错误消息：

检查“Building”的渲染方法。

Mb。我没有仔细阅读你的代码。你能发布更多building.js吗？错误指向的第11行发生了什么？是的。。。我是哑巴或瞎子。映射任何位置都需要关键点，对于所有内容。。。这是我应该深入思考的问题。哟-在别人已经发布了答案之后再重复别人的答案是不好的。不管怎么说，伙计，我们都知道发生了什么。我不知道重复他在问题中发布的错误如何算作解决方案，但我digress@altruios，你为什么不接受这个答案？

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

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