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。目前在控制台中出现“警告：数组中的每个子节点或迭代器应该具有唯一的”键“prop”。这个错误并没有引起我所知的任何问题，但这可能就是我遇到当前问题的原因。

Answer 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>
      );
    }
  }

这里，listItems是一个通过循环遍历项目数组并获取每个项目的顶部而创建的数组。此外，key={index}是反应所使用的密钥，用于了解哪些项目已被移动，删除或更改。

不推荐使用索引作为键，键应该是唯一的。总是尝试为每个对象设置一个唯一的密钥，例如id。

Answer 2

您可以使用任何常用的数组循环或映射功能遍历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") );中，但这样可以保持理智，并且用于调试，并将在运行时进行优化。）

直播示例：

＆＃13;

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

＆＃13;

CGContext

＆＃13;

Answer 3

它是data[1].topping，因为它是一个对象数组。关于键

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以赋予元素稳定的标识

有关密钥的更多信息，请参阅this page

访问Json信息

3 个答案: