我新使用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