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()可能会解决您的问题？

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

3 个答案: