Question

我已将React状态设置为来自API的数据

this.setState({loan: response.data})

response.data是一个嵌套对象

{
  application: {
    amount: 20,
    interest: 10,
    guarantor: {
      firstName: "John",
      lastName: "Doe"
    }
  },
  userId: "123"
}

通常我可以在渲染功能中访问

<p>{this.state.loan.userId}</p>
<p>{this.state.loan.application.amount}</p>
<p>{this.state.loan.application.guarantor.firstName}</p>

现在我只能访问贷款的第一个孩子。除了我实际上设置对象中每个单独项目的状态。注意console.log(this.state.loan.application.guarantor)可以正常工作。

这是API调用

fetch(`http://localhost:8000/api/v1/loans/${this.state.id}`)
    .then(res => {
      return res.json();
    }).then(response => {
      this.setState({loan: response.data});
    })
    .catch(err => console.log(err));

const {loan} = this.state;

<div className="col-md-4">
    <h5 className="title">Full Name</h5>
    <p>{loan.fullName}</p>
    <h5 className="title mt-3">Account Number</h5>
    <p>{loan.accountNumber}</p>
    <h5 className="title mt-3">Phone Number</h5>
    <p>Phone Number</p>
</div>
<div className="col-md-4">
    <h5 className="title">Loan Amount</h5>
    <p>
        {(loan.application.amount).toLocaleString("en-NG", {
        style: "currency",
        currency: "NGN"
        })}
    </p>
    <h5 className="title mt-3">Interest Rate</h5>
    <p>{loan.interestRate}%</p>
    <h5 className="title mt-3">Duration</h5>
    <p>{loan.duration} Months</p>
</div>

API调用的响应

{
            "application": {
                "guarantor1": {
                    "fullName": "Ayebakuro Ombu",
                    "residentialAddress": "30 Udengs Eradiri Avenue Off Azikoro Village Road",
                    "occupation": "Accountant",
                    "netIncome": "50000",
                    "placeOfWork": "Dreamworld",
                    "employer": "Ayebakuro Ombu",
                    "relationship": "Employer",
                    "bvn": "0101010101",
                    "bank": "GTBank",
                    "accountNumber": "10101010101",
                    "phoneNumber": "010101010101"
                },
                "guarantor2": {
                    "fullName": "Ayebakuro Ombu",
                    "residentialAddress": "B48 Copa Cobana Estate, Wumba, Lokogoma",
                    "occupation": "business man",
                    "netIncome": "500000",
                    "placeOfWork": "Dreamworld",
                    "employer": "SafeScrow Tech",
                    "relationship": "Employer",
                    "bvn": "0101010101",
                    "bank": "GTBank",
                    "accountNumber": "0101010101",
                    "phoneNumber": "0101010101"
                },
                "mode": {
                    "name": "DreamWorld Savings And Loans Ltd",
                    "address": "30 Udengs Eradiri Avenue Off Azikoro Village Road",
                    "netIncome": "50000"
                },
                "bankDetails": {
                    "bank": "Parallex Bank",
                    "accountNumber": "0101010101",
                    "bvn": "0101010101"
                },
                "amount": 200000,
                "number": "25642",
                "date": "2019-03-22T02:37:58.069Z",
                "purpose": "For debt payment"
            },
            "approval": {
                "amount": 0,
                "status": "Pending"
            },
            "issue": {
                "status": false
            },
            "payment": {
                "schedule": [],
                "completed": false
            },
            "_id": "5c944a86abf7ea09c40301e5",
            "accountNumber": "1000000002",
            "fullName": "Ayebakuro Ombu",
            "type": "Business",
            "duration": 5,
            "interestRate": 10,
            "__v": 0
        }

错误：LoanPage.js：61未捕获的TypeError：无法读取未定义的属性“ amount” 在LoanPage.render（LoanPage.js：61）

正确记录this.state.loan.application.amount记录

Answer 1

呈现组件时（如以下代码），React立即调用相应组件的render方法。

ReactDom.render(<LoanPage />, element);

如果您要在构造函数或fetch方法中执行异步componentWillMount，则不会阻止React系统执行渲染。

这是解决此问题的方法。在构造函数/ componentWillMount中，应设置this.state.loading = true，然后触发fetch调用。在提取调用的.then部分中，使用setState清除加载标志，如下所示：

this.setState({
    loading: false,
    loan: response.data
});

LoanPage的render方法现在可以从“正在进行的提取调用”的知识中受益：

render() {
    if(this.state.loading) {
        return (<h3>Loading...</h3>);
    }

    return (
        <div> Loan amount is {this.state.loan.application.amount} </div>
    );
}

您可以更改渲染的第一部分（如果有条件的话）以显示微调器或某些等效项。您应该更改第二部分以渲染现在要渲染的所有内容。

React不会访问嵌套状态

1 个答案: