如何处理 this.state is undefined issue in React？

Question

我正在尝试从 returns 格式为 JSON 客户数据对象的 GET 方法中读取数据。我可以通过使用 console.log(JSON.stringify(obj, null, 2));

登录到控制台来查看该对象

但是，我不确定如何使用对象中的元素。当我尝试验证元素或简单地登录到控制台时，它总是显示未定义。

GET方法获取的示例对象如下：

customer [
  {
    "customer_number": "aa",
    "customer_name": "bb",
    "email": "dd@dd.com",
    "db_name": "cc",
    "memo": "ee",
    "ready_to_send": "u",
    "id": 14,
    "IsDeleted": "N",
    "ap_listid": "80000026-1370858794",
    "ar_listid": "80000028-1370863458",
    "cash_listid": "80000031-1373515733"
  }
]

这是我的代码，它试图显示一个显示返回数据的表单。

export default class Customers extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: null,
            isDeleting: null,
            customer: [],
            customer_number: "",
            customer_name: "",
            email: "",
            db_name: "",
            memo: ""
        };
    }

    async componentDidMount() {
        try {

            const customer = await this.getCustomer();
            const { customer_number, customer_name, email, db_name, memo} = customer;

            console.log("customer " + JSON.stringify(customer, null, 2));  //Correctly print the object to console in JSON format

            this.setState({
                customer,
                customer_number, 
                customer_name, 
                email, 
                db_name,
                memo

            });
        } catch (e) {
            alert(e);
        }
    }

    getCustomer() {
        return API.get("customers", `/customers/${this.props.match.params.id}`);
    }

    validateForm() {
        return this.state.customer_number.length >0; 
    }

    handleChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    }

    render() {
        return (
            <div className="Customers">
            {this.state.customer &&
                <form onSubmit={this.handleSubmit}>
                <FormGroup controlId="customer_number">
                    <ControlLabel>Customer Number</ControlLabel>
                    <FormControl
                    onChange={this.handleChange}
                    value={this.state.customer_number}
                    componentClass="input"
                    />
                </FormGroup>
                <LoaderButton
                    block
                    bsStyle="primary"
                    bsSize="large"
                    disabled={!this.validateForm()}
                    type="submit"
                    isLoading={this.state.isLoading}
                    text="Save"
                    loadingText="Saving…"
                />
                </form>}
            </div>
        );
    }
}

请帮助我了解我做错了什么以及如何解决未定义的问题。非常感谢！

Answer 1

try {
  const customer = await this.getCustomer();
  const {customer_number, customer_name, email, db_name, memo} = customer[0] || {};

  this.setState({
     customer,
     customer_number, 
     customer_name, 
     email, 
     db_name,
     memo
  });
}

因为是数组

如何处理 this.state is undefined issue in React？

How to approach this.state is undefined issue in React?

crud

reactjs