将数据绑定到 state - React JS

Question

我正在为我的应用程序使用 React。 我正在使用 Axios 从 API 获取数据。 当我控制台记录 response.data 时，我可以在 Google Chrome 控制台中看到从 API 获取的数据。

但是当我控制台记录“this.state.supplier”时，我在 Google Chrome 控制台中得到以下信息：

API 数据：[对象对象]

这是我的代码：

class SupplierData extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            supplier:[
                {
                    id: 0,
                    supplierTitle: "Supplier Title",
                    supplierFirstName: "First Name",
                    supplierLastName: "Last Name",
                    companyName: "Company Name",
                    phoneNumber: "Phone Number",
                    otherPhoneNumber: "Phone Number (Other)",
                    accountNumber: "Account Number",
                    email: "Email",
                    address: "Address",
                    website: "Website",
                    hourlyRate: "Hourly Rate",
                    typeOfGoods: "Type Of Goods",
                    paymentTerms: "Payment Terms",
                    createdAt: "Created At",
                    notes: "Notes",
                    products: "Products",
                    components: "Components"

                },

            ],
            errorMessage: [],
        };
        this.ListAllSuppliers = this.ListAllSuppliers.bind(this);
    }


    ListAllSuppliers = async () =>{
        return await axios.get(`http://localhost:8080/api/suppliers/supplier/list`)
            .then((response) =>{
                let results = response.data;
                console.log(results)
                this.setState({supplier: results})
                console.log(`API Data: ${this.state.supplier}`)
            }).catch((error) =>{
                this.setState({errorMessage: this.state.errorMessage.push(error)});
            })
    }
}


export default SupplierData;

为什么数据没有绑定到 state？

Answer 1

发生这种情况是因为您试图将 object 作为字符串进行控制台。 在字符串表示中 javascript object 是 [object Object]。 尝试使用console.log('API Data: ', this.state.supplier)代替。