Могу ли я отфильтровать массив объектов из состояния и затем отобразить их?

Question

Я пытаюсь отфильтровать товары из моего состояния и затем отобразить их на странице.

Идея состоит в том, чтобы сравнить 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);

Answer 1

Похоже, вы в значительной степени там.Вы правы, что не можете напрямую визуализировать из фильтра, но вы сгенерировали отфильтрованный список, который затем можно просто отобразить.

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

Answer 2

Вы можете создать элемент 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>
     } 
    });
}

Таким образом, вы просто итерируете один раз по всем вашим продуктам вместо фильтрации, а затем отображаете в отдельных итерациях.

Answer 3

Вы не возвращаете предметы во втором блоке. Также вы возвращаетесь дважды.Удалено в блоке ниже

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