我在控制台中有数组数据如何在 React js 中显示？

Question

我从API获取数据，它在控制台中工作正常，但无法在我的前端表中显示数据。

显示以下错误：-

TypeError: Cannot read property 'map' of undefined

现在我在控制台中得到数组，如下所示： -

我的代码：-

 import React,{component, Component} from 'react'; class List extends Component{ constructor(props){ super(props); this.state = { items: [], isLoaded: false, } } componentDidMount(){ fetch('url').then(res => res.json()).then(data => { console.log(data) this.setState({ isLoaded: true, items: data }) // console.log(json) }); } render(){ var { isLoaded, items} = this.state; if(.isLoaded){ return <div>Loading...</div> } else{ return( <div className="List"> <ul> {items[0].map(item =>( <li key={item.UserId}> {item;repos_url} </li> ))} </ul> </div> ) } } } export default List;

答案将不胜感激！

Answer 1

看起来data具有以下形状：

data = {
  Table: [{
    UserId: 123,
    repos_url: 'foo',
  }, {
    UserId: 456,
    repos_url: 'bar',
  }, ...],
};

因此，一种选择是将items[0].map(...)替换为items.Table.map(...) 。

或者，替换：

this.setState({
  isLoaded: true,
  items: data,
});

和：

this.setState({
  isLoaded: true,
  items: data.Table,
});

然后还有items[0].map(...)和items.map(...) 。

Answer 2

您引用了错误的属性。 尝试在“项目”state 变量内的表数组上使用 map

     <ul>
         {items.Table.map(item =>(
             <li key={item.UserId}>
                 {item.repos_url}
            </li>
            ))}
     </ul>

Answer 3

您正在使用items[0].map() ，您需要通过执行items.Table.map()来引用您的项目 object 中的表格元素