需要协助以使搜索功能发挥作用

Question

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

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

在我的App.js上，我为Search组件提供了一个包含名为performSearch的函数的道具

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

有人可以帮忙吗

Answer 1

您可以在单个渲染器中将任意数量的prop传递给组件。 在呈现搜索组件时，请通过onSearch道具，如下所示：

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

如果您这样传递prop，它将永远不会在组件中找到prop onSearch，因为它正在渲染第一个匹配项，并且它没有任何prop 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