如何访问绑定到ReactJS中组件状态的JSON对象的值

Question

我正在从WebService获取JSON数据，并将其初始化为状态。 在用户界面中，我想直接将值绑定到文本框值字段。

在这里我能够记录prod的值

但是在将值绑定到文本框时，出现错误“无法获取未定义或空引用的属性”：

import * as React from 'react';
import * as $ from "jquery";

interface IBudgetRequestReadOnly {
    data: [any];
}

export class BudgetRequestReadOnly extends React.Component<{ RequestNumber }, IBudgetRequestReadOnly> {

    constructor(props) {
        super(props);

        this.state = {
            data: [{}],
        };
    }

    componentDidMount() {
        const RequestNumber = this.props.RequestNumber;

        $.ajax({
            type: "POST",
            url: "Home/GetRequestByRequestID",
            dataType: "json",
            data: { requestID: RequestNumber },
            success: function (msg) {
                if (msg) {
                    this.setState({ data: msg });
                    console.log(this.state.data["product"].product);
                }
            }.bind(this),
            error: function (msg) {

            }
        });
    }

    public render() {

        return <div>
           <div className="col-sm-12 Card ">
            <div className="row">&nbsp;</div>
           
            <div className="row">
                <div className="col-sm-12">
                    <label>Product Need<sup>*</sup></label>
                        <input type="text" className="form-control" aria-describedby="basic-addon1"
                            value={this.state.data["product"]} disabled />
                </div>
            </div>
            <br />
        </div>
        </div >;
    }

}

Answer 1

那是因为您的ajax请求是异步的。目前正在发生这种情况：

1. 您的构造函数将被调用。
2. render（）被称为
3. componentDidMount被称为

问题是您试图绑定render的{​​{1}}函数，但是在第一次安装时尚不存在。因此浏览错误无法获得未定义或空引用的属性，因为this.state.data.product.product中不存在this.state.data.product。

您可以在组件状态内设置默认值：

this.state.data

默认情况下，这将以constructor(props) { super(props); this.state = { data: { product: { product: '', } }, }; } 为空字符串，并且从API获取数据并更新状态后，将设置实际的this.state.data.product.product。

现在，您可以使用data.product.product而不会出错。