时间戳

首页 > 解决方案 > 按特定键过滤对象数组

reactjs - 按特定键过滤对象数组

问题描述

我正在尝试过滤一组对象（如下所示），当用户在输入字段中键入时，它会返回搜索到的内容。我想通过name键搜索特定并返回相应的值。

就我目前所拥有的，我不断收到以下错误：

Objects are not valid as a React child (found: object with keys {type, id, name}). If you meant to render a collection of children, use an array instead.

初始状态：

const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);

对象数组：

const people = [
  { name: 'Siri', id: 'siri' },
  { name: 'Alexa', id: 'alexa' },
  { name: 'Google', id: 'google' },
  { name: 'Facebook', id: 'facebook' },
  { name: 'Twitter', id: 'twitter' },
  { name: 'LinkedIn', id: 'linkedin' },
];

使用效果：

useEffect(() => {
    const searchResults = processorOptions.filter((o) =>
      Object.keys(o).some((k) => o[k].toString().toLowerCase().includes(searchTerm))
    );

    setSearchResults(searchResults);
}, [searchTerm]);

搜索领域：

<input
    name='peopleSearch'
    id='peopleSearch'
    className='form-control'
    type='text'
    placeholder='Filter by Name'
/>

显示搜索结果：

{searchResults.map((item) => (
    <li>{item}</li>
))}

标签： reactjs

解决方案

您需要显示项目的名称而不是项目本身：

{searchResults.map((item) => (
    <li>{item.name}</li>
))}

推荐阅读