需要帮助以使搜索功能在反应中起作用[关闭]

Question

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

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

在我的 App.js 上，我为 Search 组件提供了一个 prop thst，其中包含一个名为 performSearch 的函数

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

有人可以帮忙

Answer 1

您可以在单个渲染中将任意数量的道具传递给组件，即 在渲染搜索组件时，像这样传递 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