useState 设置函数未在句柄函数中调用[重复]答案

【问题标题】：useState set function not calling in the handle function [duplicate]useState 设置函数未在句柄函数中调用[重复]
【发布时间】：2021-10-18 11:34:07
【问题描述】：

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

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 >

【问题讨论】：

假设selectedValues 是状态，您应该复制它：let temp = [...selectedValues]; 并将您的状态默认为useState() 中的空数组[]，否则您正在修改您的状态就地
@NickParsons 谢谢。它奏效了。

标签： reactjs react-native

【解决方案1】：

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

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

【讨论】：