为什么无法从 reactjs 中的 json 响应中读取数组子元素？

Question

我得到数据 json：

componentDidMount() {
        const {axios} = this.props
        const {invoice} = this.state

                axios({
                    method: 'get',
                    url: `/invoice`,
                }).then((result) => {
                    this.setState({invoice: result.data})
                }).catch((error) => {
                    this.setState({error: error.response.data[0]})
                })

    }

而我的json数据是这样的：

{"branchId":"c3","id":"30","invoiceLines":[{"id":"089","productId":"7c"}],"sumTotalPrice":2700}

我尝试像这样显示“invoiceLines”的 ID：

return(
<Grid container>
    <Grid item xs={12}>

{this.state.invoice.invoiceLines.map((item, i) => {
    <p key={i}>{item.id}</p>
})}

    </Grid>
</Grid>
)

但捕获此错误： TypeError: this.state.invoice.invoiceLines 未定义

Answer 1

加载数据是异步的，render 在开始时会在没有数据的情况下被调用。当数据到达setState 将强制视图更新 - 第二个render。

您需要防止访问未准备好的数据 - f.e.显示“正在加载”。

Example from docs

更新： 定义初始状态（构造函数）只涉及一个真正的问题，并且只在简单的情况下有用——一/两级深。对于更深的结构，这是不切实际的。

Answer 2

相信你还没有在构造函数中定义你的initialState，或者像this.state = {invoice: []}

尝试在构造函数中将初始状态定义为this.state = {invoice: {invoiceLines : []}}

如果此建议不起作用，请发布有关该组件的更多信息

Answer 3

正如前面提到的，加载数据是异步的。将componentDidMount() 更改为componentWillMount() 可能会解决您的问题？