需要帮助使搜索功能在 React 中工作

Question

所以我有一个名为 Form 的组件，该组件可以根据用户输入启用实时搜索，

表单组件必须在搜索组件内呈现，这是它的屏幕截图

在我的 App.js 上，我为搜索组件提供了一个道具，它包含一个名为 performSearch

的函数

但是，当我尝试提交搜索输入时出现此错误：

有人可以帮忙吗

Answer 1

您可以在一次渲染中将任意数量的道具传递给您的组件，即在渲染搜索组件时，像这样传递 onSearch 属性：

  <Route
    exact
    path="/search"
    render={() => (
      <Search
        onSearch={this.performSearch}
        data={this.state.pics}
      />
    )}
  />

如果你像这样传递道具，它永远不会在组件中找到道具 onSearch 因为它正在渲染第一个匹配并且它没有任何道具 onSearch

这是不正确的方法：

  <Route
    exact
    path="/search"
    render={() => <Search  data={this.state.pics} />}
  />
  <Route
    exact
    path="/search"
    component={() => <Search onSearch={this.performSearch} />}
  />

供您参考，您可以检查一下：https://codesandbox.io/s/llk96nk5l

需要帮助使搜索功能在 React 中工作

need assistance on making search feature work in react

javascript

reactjs

react-router

react-component