javascript - 获取Json信息

Question

我有一个 .json 文件，无法从中访问某些信息。我正在使用 React 来进行情境化。在这种情况下，我想访问“toppings”。

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

使用 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>
      );
    }
  }

但是如果我尝试做类似的事情

pizzaData: data.topping 

返回时未定义。

我如何访问数据？

PS。目前，控制台中存在错误“警告:数组或迭代器中的每个子项都应具有唯一的“key”属性。”据我所知，此错误尚未引起任何问题，但这可能就是我遇到当前问题的原因。

Answer 1

您可以循环访问pizzaData (这是一个数组)使用任何常见的数组循环或映射功能；例如，您可以使用 map创建 li对于每个条目:

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

注意key={index}在那里，为列表中的每一行指定一个唯一的键。

在其中，您可以访问 size和topping上entry访问它们。例如:

const list = this.state.pizzaData.map((entry, index) => {
    return <li key={index}>Size: {entry.size}, Topping: {entry.topping}</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>
    )
}

(您不需要 list 常量，您可以将对 map 的调用嵌入到 <ul>...</ul> 中，但它对于保持理智和调试很方便，并且会在运行时得到优化。)

实例:

var data = [    
   {
      "topping": "pineapple and cheese",
      "size": "medium"
   },
  {
      "topping": "spinich",
      "size": "small"
  }
];

class Inf extends React.Component {
    constructor() {
        super();
        this.state = {
            pizzaData: data
        }
    }
    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>
        )
    }
    render() {
        //console.log(this.state.pizzaData)
        return (
            <div>
            <h1> Chose your seat</h1>
            <div>{this.renderList(this.state.pizzaData)}</div>
            </div>
        );
    }
}

ReactDOM.render(
    <Inf />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>