Reactjs 使用React从API获取后，不会填充结果

我正在使用一些示例来使用

fetch

从API获取数据。但是，它没有返回任何预期。我做错了什么？为什么它不流行？这是一本书

此处的应用程序代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import axios from 'axios';
import './style.css';

const url='https://10degrees.uk/wp-json/wp/v2/posts';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      searchInput: 'tirur',
      avatarDatas: []
    };
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount(){
    this.fetchData(url);
  }

  fetchData = (apiToFetch)=>{
     fetch(apiToFetch)
     .then(result=>result.json())
     .then(avatarData=>{
       this.setState({
         avatarDatas : avatarData
       })
     })
     .catch((error) => console.log(error));
  }

  render() {
    console.log(this.state.avatarDatas)
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
        {this.state.avatarDatas.map(item=>{
          <div>{item}</div>
        })}
        </p>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
从“axios”导入axios；
导入“/style.css”；
常量url=https://10degrees.uk/wp-json/wp/v2/posts';
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
searchInput:'tirur'，
虚拟数据：[]
};
this.fetchData=this.fetchData.bind（this）；
}
componentDidMount（）{
这个.fetchData（url）；
}
fetchData=（apiToFetch）=>{
提取（apiToFetch）
.then（result=>result.json（））
。然后（虚拟数据=>{
这是我的国家({
化身数据：化身数据
})
})
.catch（（错误）=>console.log（错误））；
}
render（）{
console.log（this.state.avatas）
返回(

{this.state.avatars.map（项=>{
{item}
})}

);
}
}
render（，document.getElementById（'root'））；

您的代码正确地从远程URL获取数据。但是，您在

渲染

方法中使用的

映射

函数是错误的。你有：

{this.state.avatarDatas.map(item=>{
  <div>{item}</div>
})}

甚至在这种情况下，没有实际的功能块，只有一个返回值：

{this.state.avatarDatas.map(item=>
  <div>{item}</div>
)}

（或每个

avatadata

具有的许多字段中的任何其他字段。）

最后，React可能仍然会发出警告，指出列表中的每个项都必须具有唯一的键。无论何时使用

map

创建多个元素，React都希望您为每个元素提供一个唯一的标识符，在重新提交期间需要更新列表时，React将使用该标识符来标识该元素。这意味着您应该这样做：

{this.state.avatarDatas.map((item, index) =>
  <div key={index}>{item.title.rendered}</div>
)}

{this.state.avatarDatas.map（（项目，索引）=>
{item.title.rendered}
)}

现在，您的

map

回调为每个

分配了一个索引，一切都很好

{this.state.avatarDatas.map(item=>
  <div>{item.title.rendered}</div>
)}

{this.state.avatarDatas.map((item, index) =>
  <div key={index}>{item.title.rendered}</div>
)}