useState设置函数没有在句柄函数中调用

Question

我试图通过给出一组预定义的数据在数组中存储多个值。选择选项是可点击的组件。我有两个数组，一个用于存储值，另一个用于选择值。

const [selected, setSelected] = useState<string[]>([]);
const [categories] = useState<string[]>([
"fashion", "sports", "gaming", "lifestyles", "finance"
])

我有显示组件的自定义组件。当我单击它们时，所选状态不会更新，但在代码更改/在编辑器中再次保存代码后，组件会正确呈现。有人知道吗?提前感谢

const handlePress = (e) => {
let temp = selectedValues || [];
const val = temp?.findIndex(a => a === e);
if (!temp || val === -1) {
temp.push(e);
} else {
temp.splice(val, 1);
}
setSelectedValues(temp);
}
return (
<>
{categoryList.map(e => {
return <CategoryItem
key={e}
text={e}
selected={selectedValues.includes(e)}
style={{ height: 28 }}
handlePress={handlePress} />
})}
</>
)

category-item.tsx

<TouchableOpacity style={selected ? viewStyleSelected : viewStyle} onPress={() => handlePress(text)}>
{content}
</TouchableOpacity >

Answer 1

您正在改变状态变量。因此，react认为它是同一个对象，不会重新渲染。您需要设置一个新的数组为selectedValues:

const handlePress = (e) => {
setSelectedValues(selectedVals => {
return selectedVals.includes(e) ? [...selectedVals, e] :
selectedVals.filter(val => val !== e)
})
}