从 React.js 中的 json 文件中获取数据

IT技术 javascript json reactjs fetch
2021-05-07 03:12:06

我有一个 json 文件调用 data.json，例如（我使用 React.js）：

[{"id": 1,"title": "Child Bride"}, 
{"id": 2, "title": "Last Time I Committed Suicide, The"}, 
{"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"}, 
{"id": 4, "title": "Youth Without Youth"}, 
{"id": 5, "title": "Happy Here and Now"}, 
{"id": 6, "title": "Wedding in Blood (Noces rouges, Les)"}, 
{"id": 7, "title": "Vampire in Venice (Nosferatu a Venezia) (Nosferatu in Venice)"}, 
{"id": 8, "title": "Monty Python's The Meaning of Life"}, 
{"id": 9, "title": "Awakening, The"}, 
{"id": 10, "title": "Trip, The"}]

我是我的 componentDidMount 我有以下内容：

      fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=>{
  console.log(findresponse.title)
  this.setState({
    data:findresponse.title,
  })
})

}

在我的渲染中：

 <ul>

         <li>        {this.state.title}</li>;


    </ul>

我想列出我的 json 文件中的所有标题，

否则它说 .then((response) => response.json()) 是一个匿名函数。. .

如何解决这个问题？我有点困惑

非常感谢

3个回答

您可以使用异步/等待。它需要更少的代码行。

async getData(){
   const res = await fetch('./data/data.json');
   const data = await res.json();
   return this.setState({data});
}

在 componentDidMount() 调用函数即

componentDidMount(){
   this.getData();
}

最后，在渲染中，映射数据数组

render (){
   return {<ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
)
}

您的响应不是具有 title 属性的对象，而是一个对象数组，所有这些对象都具有 title 属性。 

this.setState({ data: findresponse });

然后在你的渲染中 

<ul>
  {this.state.data.map((x, i) => <li key={i}>x.title</li>)}
</ul>

您获得了对象数组，因此您需要将整个对象存储在您的状态中，然后从状态中读取所有标题属性。

您的提取应如下所示：

fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=> {
  this.setState({
    data:findresponse
  })
})

然后在你的渲染中你应该有如下内容：

render(){
    return (
      <ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
    )
}

这将为您提供数据对象的所有标题属性。

其它你可能感兴趣的问题
上一篇React-Native 无法在 Android 上构建 下一篇在输入名称上react-hooks形式 useFieldArray typescript错误