Reactjs即时搜索

Question

我有一个JSON模式，我正在页面中进行映射，然后进行渲染。现在，我想过滤一个唯一的搜索查询并仅呈现搜索结果。

Listing.jsx

    <div id="searchbar">
      <Hero>
        <Section>
          <Container>
            <Heading style={{ color: "white" }}>SEARCH</Heading>
            <Field>
              <Control>
                <Input
                  onChange={this.onChangeSearch}
                  name="query"
                  type="text"
                  placeholder="Enter query"
                  value={query}
                />
              </Control>
            </Field>
          </Container>
        </Section>
      </Hero>
    </div>
<div>
{pageItems.map(data => (
            <div key={data.id}>
              {data.status === true ? (....) : (...)}</div>}

如何在即时搜索/实时搜索中仅显示相关的搜索结果？

根据评论/建议，我希望基于特定数组或整个JSON对象进行搜索。

这是我的onChange事件，它在控制台中返回整个JSON对象。

  onChangeSearch = evt => {
    this.setState({
      [evt.target.name]: evt.target.value
    });

    this.state.items.map(data => {
      return console.log(data);
    });
  };