无法使用useState更改函数组件上的数组数据

Question

当用户单击每个项目时，我会有一个列表，它将更改我的阵列数据。

我的性别数组的第一个数据是：

[
  {optionName: "Man", sex: 1, selected: true},
  {optionName: "Woman", sex: 1, selected: false}
]

const [genderOption, setGenderOption] = useState(gender);

      onItemPress = (item, i) => {
        console.log('print i', i);
        console.log('click genderOption', genderOption);

        genderOption.map((value, index) => {
          genderOption[index].selected = false;
        } );

        console.log('after genderOption', genderOption);

        genderOption[i].selected = true;

        console.log('final genderOption', genderOption);
        // setGenderOption([...genderOption]);

        // setTimeout(() => {
        //   console.log('timeOut !');
        //   setGenderOption([...genderOption]);
        // }, 5000);
      }

      console.log('genderOption', genderOption);

      return (
        // my listView has onPress function trigger onItemPress()
      );

当点击索引=== 0

当点击索引=== 1

这是我使用setTimeout

的时间

Answer 1

这是因为您尝试直接在newGender.map迭代中更新原始数据项。

newGender.map((value, index) => {
  console.log('before', genderOption[index].selected);
  genderOption[index].selected = false; <------ this line is wrong
  console.log('after', genderOption[index].selected);
} );

按如下所示进行更改，它应该是正确的

const newGender = genderOption.map((value, index) => ({
  ...value,
  selected = false,
}));

Answer 2

您可以通过映射先前的状态并通过比较索引来设置selected来轻松解决此问题

const onItemPress = (item, i) => {
  setGenderOption(prevState => prevState.map((gender, index) => ({
    ...gender,
    selected: i === index,
  }));
};