react-native - 无法使用 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

标签： react-nativereact-hooks

Answer 1

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

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