javascript - TypeError : Cannot read property 'name' of undefined, 但使用另一个属性就可以了

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

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

const tableData = !this.state.isLoading && this.state.data.map(e => <Item key={e._id} item={e} data={(e.data || {} ).name} deleteItem={this.deleteItem} />)