Question

从API获取数据。数据就像[{"_id":"someId","data":{"name":"someName", ...}}, ...] 我的状态和获取就像

class Table extends React.Component {
constructor() {
    super();
    this.state = {
        data: [],
        isLoading: true,
    }
    this.handleClick = this.handleClick.bind(this);
    this.deleteItem = this.deleteItem.bind(this);
}

componentDidMount() {
    this.setState({
        isLoading: true,
    })
    fetch(URL)
        .then(response => response.json())
        .then(data => {
            this.setState({
                data: data,
                isLoading: false
            })
            console.log('test ' + this.state.data[29].data.name);
        })
}

最后的console.log显示数据没有问题。但是，当我尝试渲染数据时，会出现错误。我的渲染是

render() {
    const tableData = this.state.isLoading ? console.log('-test' + this.state.isLoaded) :
        this.state.data.map(e => <Item key={e._id}
            item={e} data={e.data.name} deleteItem={this.deleteItem} />)
    return (
        <div className='table' >
            {tableData ? tableData : 'loading'}
            < button onClick={this.handleClick} > ADD NEW</button>
        </div >
    )
}

当我使用data={e._id}代替data={e.data.name}时效果很好

Answer 1

您应始终检查数组是否为空。如果数组的某些元素没有数据怎么办？

Other

TypeError：无法读取未定义的属性“名称”，但是可以使用其他属性

1 个答案: