React中访问JSON文件toppings字段问题咨询

嘿，我来帮你搞定这两个问题！

一、正确访问topping字段的方法 #

首先得明确：你的JSON数据是一个数组，数组里的每一个元素才是包含topping和size的对象，所以直接写data.topping肯定会返回undefined——因为数组本身没有这个属性，只有数组里的每一项才有！

再看你当前的renderList函数，用Object.keys(this.state.pizzaData).map(...)其实是在遍历数组的索引（比如"0"、"1"），所以你渲染出来的只是索引值，而不是披萨的配料信息。

修改方法很简单，直接遍历数组的每一项，然后访问每一项的topping属性即可：

class Inf extends React.Component { 
  constructor() { 
    super(); 
    this.state = { pizzaData: data } 
  } 
  renderList(data){ 
    // 直接遍历数组元素，而非索引
    return ( 
      <ul>
        {data.map(pizza => <li>{pizza.topping}</li>)}
      </ul> 
    )
  } 
  render() { 
    console.log(this.state.pizzaData) 
    return ( 
      <div> 
        <h1> Choose your pizza topping</h1> 
        <div>{this.renderList(this.state.pizzaData)}</div> 
      </div> 
    ); 
  } 
}

这样就能正确渲染出每个披萨的配料信息了！

二、解决"key" prop警告的问题 #

这个警告和你访问数据的问题不直接相关，但确实需要修复——React要求数组渲染的每个子元素必须有唯一的key属性，这样它才能高效地更新DOM结构。

因为你的数据里没有自带唯一ID，你可以暂时用数组的索引作为key（如果你的披萨列表不会重新排序、新增/删除的话），修改map部分的代码：

{data.map((pizza, index) => <li key={index}>{pizza.topping}</li>)}

如果之后你的数据会有动态变化（比如新增配料、调整顺序），最好给每个披萨对象加一个唯一的id字段，比如：

[ 
  { "id": 1, "topping": "pineapple and cheese", "size": "medium" }, 
  { "id": 2, "topping": "spinich", "size": "small" } 
]

然后用这个id作为key：

{data.map(pizza => <li key={pizza.id}>{pizza.topping}</li>)}

这样就能彻底消除这个警告啦！

内容的提问来源于stack exchange，提问作者sacora