ReactJS错误无法读取从API调用的属性

我新使用react,express,node!

我有一个具有user_id和product_id属性的订单,用于引用用户和产品。

当我尝试渲染Order comp时,我在用户对象中出现此错误。 我不知道为什么我有这个错误。 Console.log报告用户是带有电子邮件字段的对象。

我有两个组合,一个Order和一个ListOrders。

在ListOrders中,componentDidmount()调用API并设置状态用户和订单。该组件具有一个功能,可以搜索电子邮件用户的每个订单。 渲染方法是使用Order comp并传递订单和用户属性。

class Order2 extends Component {

    constructor(props){
        super(props)
        this.state ={
            order: props.order,user: props.user
        }
    }

    render() {
        return (
            <tr>
                <td>{ this.state.order._id  }</td>
                <td>{ this.state.user.email }</td>
                <td>{ this.state.order.id_product }</td>
                <td>{ this.state.order.price }</td>
            </tr>
        )
    }
}
export default class ListOrders extends Component {
    _isMounted = false

    constructor(props){
        super(props)

        this.state = {
            orders: [],users: []
        }
    }

    componentDidmount() {
        this._isMounted = true

        axios.get('http://localhost:5000/orders/')
          .then(response => {
            this.setState({ 
                orders: response.data
            })
          })
          .catch( error => {
            console.log(error)
          })

        axios.get('http://localhost:5000/users/')
          .then(response => {
            this.setState({ 
                users: response.data
            })
          })
          .catch( error => {
            console.log(error)
          })
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    ordersList() {
        return this.state.orders.map(current => {
            let user = this.getusername(current.id_user)
            console.log(user)
            return <Order2 order={current} user={user} key={current._id}/>;
        })
    }

    getusername(id){
        let user = this.state.users.find( user => user._id === id)
        //console.log(user)
        return user
    }

    render(){
        return(
            <div classname="container">
                <h2>List of orders</h2>
                <table classname="table table-dark table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>username</th>
                        <th>Product</th>
                        <th>Price</th>
                    </tr>
                    </thead>
                    <tbody>
                        { this.ordersList() }
                    </tbody>
                </table>
            </div>
        )
    }
}

Order2中的console.log(props)

{order: {…},user: {…}}
order:
createdAt: "2019-11-01T17:23:54.342Z"
id_product: "5db269871d3b7326046c17cf"
id_user: "5db8f9c1f877bd4437f1dbd8"
observations: "mary jane love"
price: 25.99
updatedAt: "2019-11-01T17:23:54.342Z"
__v: 0
_id: "5dbc6a2ac832121f8cba9db5"
__proto__: Object
user:
createdAt: "2019-10-30T02:47:29.569Z"
email: "ravivignolo@gmail.com"
lastname: "vignolo"
name: "nicolas"
updatedAt: "2019-10-30T02:47:29.569Z"
username: "ravi0l"
__v: 0
_id: "5db8f9c1f877bd4437f1dbd8"
__proto__: Object
key: (...)
get key: ƒ ()
__proto__: Object
xiaoxucheng09 回答:ReactJS错误无法读取从API调用的属性

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3163262.html

大家都在问