ios 重新呈现次数过多,代码未刷新

mwngjboj  于 2023-02-26  发布在  iOS
关注(0)|答案(3)|浏览(177)

所以我在尝试更新数组的状态时得到了错误太多的重新呈现。
我声明了一个名为sampleFriends的数组,由具有“name”、“location”和“picture”字段的对象组成(数组的每个元素看起来类似于:{姓名:“约翰”,地点:“波士顿”,图片:测试图像})。
然后我使用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匹配的用户,而concidencies为我提供了这些用户,但我无法使用setFriendMatches更新matchesState(这是我想呈现的)。希望这有意义,并感谢您的帮助!!
更新:一些回复告诉我将onChange={search()}更改为onChange={search},这样就消除了错误。但是,现在search永远不会运行。

w1jd8yoj

w1jd8yoj1#

在onChange事件中,只需像onChange={search}这样提及函数名,或者如果需要放置一些参数,则在函数中调用它,如下所示。
这就是最终代码块的外观。

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

如果成功了告诉我

e4yzc0pl

e4yzc0pl2#

将您的代码替换为:

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

pqwbnv8z3#

TextInput中的第4行从onChange={search()}更改为onChange={search}
通过调用该函数,可以在每次重新渲染时触发无限次重新渲染。
由于您的组件不太可能需要双onChange事件侦听器,因此可能还有其他问题,我做了一个简单的演示,向您展示如何以更干净的方式管理这些场景:https://stackblitz.com/edit/react-eijegp

相关问题