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

【问题标题】：I have array data in console how can i display it in react js?我在控制台中有数组数据如何在 React js 中显示？
【发布时间】：2020-05-05 20:53:20
【问题描述】：

我正在从 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;

我们将不胜感激！

【问题讨论】：

标签： javascript arrays json reactjs

【解决方案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(...)。

【讨论】：

【解决方案2】：

您引用了错误的属性。尝试映射“items”状态变量中的 Table 数组


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

【讨论】：

【解决方案3】：

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

【讨论】：