我正在尝试从状态过滤产品,然后在页面上渲染它们。
这个想法是比较products.user_id并确保它与我当前登录的user.user_id匹配,然后仅渲染通过的产品。
我正在尝试在页面上使用所有产品的一个视图,并且旁边的视图将使所有特定的登录用户产品都列入。
我尝试了一堆不同的过滤器组合,但是我认为我的主要问题是找到如何使用过滤器功能使用渲染。
使用MAP,您可以将不同的属性直接映射到页面上,并将其作为道具将其传递到例如要渲染的道具上,但是使用过滤器,它不会用户使用相同的语法。我可能错了。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { get_user, get_products } from '../../ducks/reducer';
import axios from 'axios';
class SellerProducts extends Component {
constructor() {
super();
this.state = {
products: []
};
}
componentDidMount() {
this.props.get_user();
// console.log('specific user product', this.props.get_products());
axios.get('/api/product').then(res => {
// console.log('Get all products (SellerProducts', res);
this.setState({ products: res.data });
console.log('SellerProducts products', this.state.products);
});
console.log('sellerproduct component mount user', this.props.user);
}
render() {
let sellersItems = [];
// if (this.state.products.length > 0) {
// sellersItems = this.state.products.filter((products, i) => {
// console.log('incoming array',products)
// return products[i].user_id === this.props.user.user_id;
// });
// }
if (this.props.loggedIn === false) {
return (
<div className="product_container">
<div>
{sellersItems}
<div>
{this.props.product_name}
</div>
<div>
{this.props.info}
</div>
<div>
{this.props.product_type}
</div>
<div>
<img
className="sellerProductImages"
src={this.props.img_url}
alt={this.props.product_type}
/>
</div>
</div>
</div>
);
}
if (this.state.products.length > 0 && this.props.loggedin === true) {
sellersItems = this.state.products.filter((products, i) => {
console.log('incoming array', products);
return products[i].user_id === this.props.user.user_id;
return {
products[i].user_id === this.props.user.user_id;
}
});
}
}
}
const mapStateToProps = state => state;
export default connect(mapStateToProps, {
get_user,
get_products
})(SellerProducts);
您没有在第二个块中返回项目您还返回两次。在下面的块中删除
var sellersItems = this.state.products.filter((products, i) => { // <-----
console.log('incoming array', products);
return products[i].user_id === this.props.user.user_id;
});
return sellersItems.map(item => {
// However you want to display the items
return <div> {item.user_id} </div>
})
看起来您几乎在那里。您是正确的,不能直接从过滤器呈现,但是您生成了过滤列表,然后可以映射。
if (this.state.products.length > 0 && this.props.loggedin === true) {
sellersItems = this.state.products.filter((products, i) => {
console.log('incoming array', products);
return products[i].user_id === this.props.user.user_id;
});
sellersItems.map(item => (<span>{item.name}</span))
}
您可以在过滤器中创建一个JSX元素:
if (this.state.products.length > 0 && this.props.loggedin === true) {
sellersItems = this.state.products.filter((products, i) => {
console.log('incoming array', products);
if( products[i].user_id === this.props.user.user_id ){
return <span> { products[i].name } </span>
}
});
}
这样,您只需通过所有产品迭代一次,而不是过滤,然后在分层迭代中映射。