我可以从状态中过滤一组对象然后渲染它们吗？答案

【问题标题】：Can I filter an array of objects from state and then render them?我可以从状态中过滤一组对象然后渲染它们吗？
【发布时间】：2019-07-09 22:08:53
【问题描述】：

我正在尝试从我的状态中过滤产品，然后将它们呈现在页面上。

这个想法是比较 products.user_id 并确保它与我当前登录的 user.user_id 匹配，然后只呈现通过的产品。

我正在尝试在页面上显示一个包含所有产品的视图，而它旁边的视图将包含所有特定登录用户的产品。

我尝试了一堆不同的过滤器组合，但我认为我遇到的主要问题是找到如何将渲染与过滤器功能一起使用。

使用 map，您可以直接将不同的属性映射到页面上，并将它们作为 props 传递下来，例如进行渲染，但是使用 filter，它不使用相同的语法。不过我可能是错的。

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);

【问题讨论】：

您似乎正在将商品过滤到 SellersItems 中。为什么你不只是映射到 SellerItems 之后呈现值？
filter 将创建一个新数组，其中包含从给定函数返回真值的所有元素。然后你可以在这个新数组上使用map。
非常感谢大家！我没有考虑在过滤后必须映射以渲染所有内容！谢谢！

标签： node.js reactjs redux react-redux

【解决方案1】：

您没有退回第二个区块中的项目你也回来两次。在下面的块中删除

   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>
    })

【讨论】：

这太棒了！谢谢！我忘了我可以在之后映射新的过滤数组！

【解决方案2】：

看起来你几乎在那里。你是正确的，你不能直接从过滤器渲染，但是你生成了你的过滤列表，然后你就可以映射了。

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))
}

【讨论】：

这是有道理的！我没有考虑映射新的过滤数组！

【解决方案3】：

您可以像这样在过滤器中创建一个 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>
     } 
    });
}

这样您只需对所有产品进行一次迭代，而不是过滤然后在单独的迭代中映射。

【讨论】：