Question

我正在尝试设置映射嵌套对象的条件渲染。映射对象：

const products = [
    {category: "Napoje", products:
        {
            product1: "Piwo",
            product2: "Wino",
            product3: "Cola",
            product4: "Sprite"
        }
    },
    {category: "Pieczywo", products:
        {
            product1: "Chleb",
            product2: "Bułka",
            product3: "Chałka",
            product4: "Rogal"
        }
    }
]

我的代码：

class Products extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        for(var i=0; i<this.props.products.length; i++){
            if (Object.values(this.props.products[i].products).indexOf(this.props.filter)<1) return false;
        }
        return(
            <div>
                {this.props.products
                    .map(product =>
                        <div>
                            {product.category}
                            {Object.values(product.products).map(name => <li>{name}</li>)}
                        </div>
                    )
                }
            </div>
        )
    }
}

我该如何解决？该组件从搜索输入中恢复文本。我们的想法是只显示包含文本输入的对象。

谢谢，

库巴

Answer 1

这是一个稍微优化的版本，其中对象映射到仅包含匹配产品或null s的对象，然后仅针对非null s过滤掉：

class Products extends React.Component {
  getFilteredProducts() {
    const filter = this.props.filter;

    const filteredProducts = this.props.products.map(obj => {
        // filter out those that don't match
        const filtered = Object.values(obj.products)
           .filter(p => p.indexOf(filter) > -1);

        // if no match found, exclude from the list entirely
        if (filtered.length === 0) return null;

        // combine into a new object with only filterd products
        return { ...obj, ...{ products: filtered } };
      })
      // filter out objects without any matched products
      .filter(product => product);

      return filteredProducts;
  }
  render() {
    return (
      <div>
        {this.getFilteredProducts()
          .map((product, ind) =>
            <div key={ind}>
              {product.category}
              {Object.values(product.products).map(name => <li>{name}</li>)}
            </div>
          )
        }
      </div>
    )
  }
}

Answer 2

当您只需要从数组中选择某些元素时，常见且良好的模式是过滤数组。这是未经优化的代码：

class Products extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>
                {this.props.products
                    .filter(product => Object.values(product.products).filter(
                        productName => productName.indexOf(this.props.filter) === -1 )
                    )
                    .map(product =>
                        <div>
                            {product.category}
                            {Object.values(product.products).map(name => <li>{name}</li>)}
                        </div>
                    )
                }
            </div>
        )
    }
}

我会将过滤功能抽象为方法：

class Products extends React.Component{
    constructor(props){
        super(props)
    }

    // Return every product name in a category that doesn't match a
    // specified string
    filterProducts(products, testString) {
        return products.filter(product =>
            Object.values(product.products).filter(
                productName => productName.indexOf(testString) === -1
            )
        );
    }

    render(){
        const { products, filter } = this.props;
        return(
            <div>
                {this.filterProducts(prodcts, filter).map(product => (
                    <div>
                        {product.category}
                        {Object.values(product.products).map(name => <li>{name}</li>)}
                    </div>
                )}
            </div>
        )
    }
}

Answer 3

class Products extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <div>
                {this.props.products
                    .map(product =>
                        <div>
                            {product.category}
                            {Object.values(product.products).map((name) =>{
if(name.indexOf(this.props.filter) === -1) {
return null
}
return (<li>{name}</li>)
} )}
                        </div>
                    )
                }
            </div>
        )
    }
}

这可能会有所帮助

条件呈现映射的嵌套对象

3 个答案: