如何使对象数组的搜索框在区分大小写且无空格的情况下反应

Question

我将这个对象数组放入我的状态

this.state = {
            data: {
                products: [
                    {
                        name: 'Iphone',
                        image: '/logo/Apple-Logo.jpg',
                        price: 1000
                    },
                    {
                        name: 'Google',
                        image: '/logo/Apple-Logo.jpg',
                        price: 700
                    },
                    {
                        name: 'Samsung',
                        image: '/logo/Apple-Logo.jpg',
                        price: 1700
                    },
                    {
                        name: 'Sony ',
                        image: '/logo/Apple-Logo.jpg',
                        price: 300
                    },
                ],         
        };

而且我希望能够使用区分大小写且没有空格的方式对其进行搜索。

所以我想要这样的东西，它将带有参数property和searchValue

function searchProduct(property, searchValue) {
  ...
  return newProduct;
}

这样我就可以这样称呼它

let newGoogleProduct = searchProduct('name', 'Google');

谁会给我所有名称为Google的产品

Answer 1

您可以使用filter和indexof

在您的状态下，只需添加变量即可处理搜索结果

this.state = {
        searchResults: null
        data: {
            products: [
                {
                    name: 'Iphone',
                    image: '/logo/Apple-Logo.jpg',
                    price: 1000
                },
               .
               .
               .
               .
            ],         
    };

然后添加事件处理程序

searchProduct = (e) => {
if (!e.target.value) {
    this.setState({
        searchResults: null
    });
    return
}
let results = this.state.data.products.filter(product =>
    product.name.toLowerCase().trim().indexOf(e.target.value.toLowerCase().trim()) !== -1);
this.setState({
    searchResults: results
})

};

并在渲染中添加此行

 let products = this.state.searchResults ? this.state.searchResults :this.state.data.products;

最终将此代码添加到您的jsx

 <p> search box </p>
 <input type='text' onChange={this.searchProduct}/>
 {products ? products.map(product => (
    <div key={product.name}>
         <img src={product.image}/>
          <p> {product.name} </p>
    </div>
         ))
    : ""
  }