useState set函数不调用句柄函数[重复]

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} />
      })}
    </>
  )

类别-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)
  })
}