太多的重新渲染和代码不刷新

Question

所以我在尝试更新数组状态时遇到重新渲染次数过多的错误。

我声明了一个名为 sampleFriends 的数组，由具有字段“name”、“location”和“picture”的对象组成（数组的每个元素看起来类似于：{name: 'John', location : 'Boston', 图片: TestImage}).

然后我使用 useState 如下：

  const [searchQuery, setSearchQuery] = useState('')
  const [friendMatches, setFriendMatches] = useState(sampleFriends)

我还有一个 TextInput 组件：

<TextInput
      value={searchQuery}
      onChangeText={setSearchQuery}
      onChange={search()}
      placeholder="Search Contacts"
      keyboardType="default"
    />

还有一个 search() 函数，如下所示：

  const search = () => {
    const coincidences = sampleFriends.filter(({ name }) => name.includes(searchQuery))
    setFriendMatches(coincidences)
  }

我想呈现名称与 searchQuery 匹配的用户，并且巧合给了我用户，但我不能使用 setFriendMatches 更新 matchesState（这是我想要呈现的）。希望它有意义并感谢您的帮助！！

更新：一些回复告诉我将 onChange={search()} 更改为 onChange={search} 并消除了错误。但是，现在搜索永远不会运行。

Answer 1

在onChange事件中，只需要像这样提到函数名onChange={search}或者如果你需要放一些参数，在函数中调用它，如下所示。

这就是您的最终代码块的样子。

<TextInput
      value={searchQuery}
      onChangeText={setSearchQuery}
      onChange={() => search()}
      placeholder="Search Contacts"
      keyboardType="default"
    />

如果有效请告诉我

Answer 2

将 TextInput 中的第 4 行从 onChange={search()} 更改为 onChange={search}。

通过调用函数，您会在每个 re-render 处触发无限 re-render。

可能还有其他问题，因为您的组件不太可能需要双 onChange 事件侦听器，我制作了一个简单的演示来向您展示如何以更简洁的方式管理这些场景：https://stackblitz.com/edit/react-eijegp

Answer 3

将您的代码替换为：

  <TextInput
  value={searchQuery}
  onChangeText={setSearchQuery}
  onChange={search}    // <-  This One is Important
  placeholder="Search Contacts"
  keyboardType="default"
 />

太多的重新渲染和代码不刷新

Too many re-renders and code not refreshing

javascript

ios

reactjs

react-native

react-hooks