Javascript 访问Json信息

我有一个.json文件，我很难从中访问某些信息。我用React来语境化。 在这种情况下，我想访问“浇头”

通过pizzaData中的以下代码，我能够看到.json中的所有信息

class Inf extends React.Component {
    constructor() {
      super();
      this.state = {
        pizzaData: data
      }
    }
    renderList(data){
      return(
        <ul>{Object.keys(this.state.pizzaData).map(thing =><li>{thing}</li>)}</ul>
      )
    }
    render() {
      console.log(this.state.pizzaData)
      return (
        <div>
        <h1> Chose your seat</h1>
        <div>{this.renderList(this.state.pizzaData)}</div>
        </div>
      );
    }
  }

它没有定义

我如何访问数据

---

PS.目前控制台中的“警告：数组或迭代器中的每个子级都应该有一个唯一的“键”道具”有一个错误。据我所知，这个错误还没有引起任何问题，但这可能是我出现当前问题的原因。

它是

数据[1]。因为它是一个对象数组，所以排在首位。关于钥匙呢

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识

有关键的详细信息，请参见它是
数据[1]。由于它是一个对象数组，因此位于顶部。关于钥匙呢

class Inf extends React.Component {
    constructor() {
      super();
      this.state = {
        pizzaData: [ {
    "topping": "pineapple and cheese",
    "size": "medium"

 },
 {
    "topping": "spinich",
    "size": "small"
 }]
      }
    }
    renderList(data){
      const listItems = data.map((item, index) =><li key={index}>{item.topping}</li>)
      console.log(data);
      return(
        <ul>{listItems}</ul>
      )
    }
    render() {
      console.log(this.state.pizzaData)
      return (
        <div>
        <h1> Chose your seat</h1>
        <div>{this.renderList(this.state.pizzaData)}</div>
        </div>
      );
    }
  }

键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识

有关键的更多信息，请参阅{
class Inf extends React.Component {
    constructor() {
      super();
      this.state = {
        pizzaData: [ {
    "topping": "pineapple and cheese",
    "size": "medium"

 },
 {
    "topping": "spinich",
    "size": "small"
 }]
      }
    }
    renderList(data){
      const listItems = data.map((item, index) =><li key={index}>{item.topping}</li>)
      console.log(data);
      return(
        <ul>{listItems}</ul>
      )
    }
    render() {
      console.log(this.state.pizzaData)
      return (
        <div>
        <h1> Chose your seat</h1>
        <div>{this.renderList(this.state.pizzaData)}</div>
        </div>
      );
    }
  }

构造函数（）{
超级（）；
此.state={
比萨饼数据：[{
“浇头”：“菠萝和奶酪”，
“大小”：“中等”
},
{
“浇头”：“spinich”，
“大小”：“小”
}]
}
}
渲染列表（数据）{
const listItems=data.map（（item，index）=>
{item.topping}
）
控制台日志（数据）；
返回(
{listItems}
)
}
render（）{
console.log（this.state.pizzaData）
返回(
选择你的座位
{this.renderList（this.state.pizzaData）}
);
}
}

在这里，listItems是一个数组，通过循环项目数组并获取每个项目的顶部来创建。另外，
key={index}
是react用来了解哪些项目已被移动、删除或更改的键

不建议使用索引作为键，键应该是唯一的。始终尝试为每个对象使用唯一的键，如id。
类Inf扩展了React.Component{
构造函数（）{
超级（）；
此.state={
比萨饼数据：[{
“浇头”：“菠萝和奶酪”，
“大小”：“中等”
},
{
“浇头”：“spinich”，
“大小”：“小”
}]
}
}
渲染列表（数据）{
const listItems=data.map（（item，index）=>
{item.topping}
）
控制台日志（数据）；
返回(
{listItems}
)
}
render（）{
console.log（this.state.pizzaData）
返回(
选择你的座位
{this.renderList（this.state.pizzaData）}
);
}
}

在这里，listItems是一个数组，通过循环项目数组并获取每个项目的顶部来创建。另外，
key={index}
是react用来了解哪些项目已被移动、删除或更改的键

不建议使用索引作为键，键应该是唯一的。始终尝试为每个对象设置一个唯一的键，例如id。
您可以使用任何常用的数组循环或映射功能循环通过
pizzaData
（这是一个数组）；例如，您可以使用
map
为每个条目创建
li
：

const list = this.state.pizzaData.map((entry, index) => {
    return <li key={index}>...details here...</li>;
});

这将使
renderList
如下所示：

renderList(data){
    const list = this.state.pizzaData.map((entry, index) => {
        return <li key={index}>Size: {entry.size}, Topping: {entry.topping}</li>;
    });
    return(
        <ul>{list}</ul>
    )
}

您可以使用任何常用的数组循环或映射功能循环通过
pizzaData
（一个数组）；例如，您可以使用
map
为每个条目创建
li
：

const list = this.state.pizzaData.map((entry, index) => {
    return <li key={index}>...details here...</li>;
});

这将使
renderList
如下所示：

renderList(data){
    const list = this.state.pizzaData.map((entry, index) => {
        return <li key={index}>Size: {entry.size}, Topping: {entry.topping}</li>;
    });
    return(
        <ul>{list}</ul>
    )
}


这将获得一个topping的信息，但我如何才能从所有topping接收信息（real.json非常大）。您可以循环浏览json数据。json文件基本上是一个对象数组，因此可以循环遍历所有数据。明白了吗？你的意思是每个都有一个，[]是一个变量？但是在这个场景中，由于它的react，您将如何实现它呢？这将获得一个topping的信息，但是我如何能够从所有topping接收信息（real.json非常大）。您可以通过json数据进行循环。json文件基本上是一个对象数组，因此可以循环遍历所有数据。明白了吗？你的意思是每个都有一个，[]是一个变量？但是在这个场景中，由于它的反应，你将如何实现呢？啊，我明白你的意思。是的，真正的Json有，我会把它添加到问题中。你的代码有点混乱。。。我看到您正在将
数据
传递给
renderList（）
方法，但是您没有使用该参数，而是引用了
此.state.pizzaData
第二个是尝试访问数组中的键或键值。使用单词data是任意的。如果我将其改为renderList（pizza），它对输出没有影响。那么它就破坏了在
render（）方法中使用
this.renderList（this.state.pizzaData）
的本质。不管怎样，看看“文盲作家”answer@Mark原始问题没有id；这就是为什么我没有添加id，而是使用索引。啊，我明白你的意思了。是的，真正的Json有，我会把它添加到问题中。你的代码有点混乱。。。我看到您正在将
数据
传递给
renderList（）
方法，但是您没有使用该参数，而是引用了
此.state.pizzaData
第二个是尝试访问数组中的键或键值。使用单词data是任意的。如果我把它改为renderList（pizza），它对输出没有影响，那么它就破坏了拥有
this.renderLis的本质