所以我在尝试更新数组的状态时得到了错误太多的重新呈现。
我声明了一个名为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永远不会运行。
3条答案
按热度按时间w1jd8yoj1#
在onChange事件中,只需像
onChange={search}
这样提及函数名,或者如果需要放置一些参数,则在函数中调用它,如下所示。这就是最终代码块的外观。
如果成功了告诉我
e4yzc0pl2#
将您的代码替换为:
pqwbnv8z3#
将
TextInput
中的第4行从onChange={search()}
更改为onChange={search}
。通过调用该函数,可以在每次重新渲染时触发无限次重新渲染。
由于您的组件不太可能需要双onChange事件侦听器,因此可能还有其他问题,我做了一个简单的演示,向您展示如何以更干净的方式管理这些场景:https://stackblitz.com/edit/react-eijegp