React使this.state.map不出现函数错误

Question

嘿，我想找个办法解决这个问题已经有一段时间了，我在这里到处找遍了，但什么也没找到。

我有一个API，它包含嵌套数组，并且是通过JSON提供的。

当我使用console.log时，我能够让JSON中的内容显示出来，但是当我试图映射数组时，我经常会收到错误，说明.map函数有问题。

据我所见，这种情况通常发生是因为它不适用于字符串，但从我所知道的情况来看，它并不适用于字符串.

API中有很多数据，但我确信，一旦我知道如何只获得一个数据(如日期)，我就可以处理剩下的数据了。

这是代码

export default class App extends React.Component {
constructor() {
    super();

    this.state = {     
        myItem: [] 

    };

}

componentDidMount() {

    this.getItems();
}

getItems () {
    fetch('MYAPIGOESHERE')


        .then(results => results.json())

        //THIS BELOW WORKS
        .then(results => console.log(results.date, results.location));

        //THIS BELOW AND THE RENDER DOES NOT
        .then(myItem => this.setState({myItem}))

}


render() {        
    return (
        <div>
            {this.state.myItem.map (myItem => 
                    <div> {myItem.date} </div> )}
        </div>
    )
})
}
}

谢谢!

{"date":"2018-09-16T11:22:00.000Z","location":"Cardiff City Stadium","teams":[{"name":"Cardiff City","homeTeam":true,"formation":"4-4-2","players":[{"playerId":"5afc0b73b481e9b536c4727b","position":"GK"},{"playerId":"5afc1377b481e9b536c4727c","position":"RB"},{"playerId":"5afc188bb481e9b536c47299","position":"CB"},{"playerId":"5afc188ab481e9b536c47297","position":"CB"},{"playerId":"5afc1872b481e9b536c4727e","position":"LB"},{"playerId":"5afc1873b481e9b536c4727f","position":"RM"},{"playerId":"5afc1874b481e9b536c47280","position":"CM"},{"playerId":"5afc1876b481e9b536c47281","position":"CM"},{"playerId":"5afc1876b481e9b536c47282","position":"LM"},{"playerId":"5afc1876b481e9b536c47283","position":"FW"},{"playerId":"5afc1877b481e9b536c47284","position":"FW"}]},{"name":"Swansea City","homeTeam":false,"formation":"4-3-3","players":[{"playerId":"5afc187ab481e9b536c4728a","position":"GK"},{"playerId":"5afc1878b481e9b536c47286","position":"RB"},{"playerId":"5afc1879b481e9b536c47289","position":"CB"},{"playerId":"5afc187ab481e9b536c4728b","position":"CB"},{"playerId":"5afc187bb481e9b536c4728c","position":"LB"},{"playerId":"5afc1879b481e9b536c47288","position":"RM"},{"playerId":"5afc1878b481e9b536c47287","position":"CM"},{"playerId":"5afc187bb481e9b536c4728d","position":"LM"},{"playerId":"5afc187cb481e9b536c47290","position":"FW"},{"playerId":"5afc187db481e9b536c47291","position":"FW"},{"playerId":"5afc187db481e9b536c47292","position":"FW"}]}]}

Answer 1

您不能在this.state.myItem上映射，因为它是一个对象。

你可以这样做：

<div>{this.state.myItem.date}</div>

如果您有一个对象数组，您可以：

<div>{this.state.myItems.map(e => <div>{e.date}</div>)}</div>

例如。

如果有一个包含数组的对象，则可以：

const { teams } = this.state.myItem;
<div>{teams.map(t => <div>{t}</div>)}</div>

您所拥有的数据如下所示: Object -> Array --> Object，因此您可以结合上面的内容来显示您想要的数据。

Answer 2

尝试用大括号包装setState：

    .then(myItem => {
       this.setState({myItem})
    }) 

Map函数适用于数组，您似乎只有一个对象。试试这个：

    return (
       <div> {this.state.myItem.date} </div>
    )

并删除地图和括号之间的空格。