json 我在控制台中有数组数据,如何在React中显示它?

nxowjjhe  于 11个月前  发布在  React
关注(0)|答案(3)|浏览(147)

我从一个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;


我如何才能做到这一点?

gojuced7

gojuced71#

data的形状如下:

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

字符串
因此,一个选择是用items.Table.map(...)替换items[0].map(...)
或者,替换:

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


有:

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


还有items[0].map(...)items.map(...)

gdx19jrr

gdx19jrr2#

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

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

字符串

piwo6bdm

piwo6bdm3#

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

相关问题