Can not use useState to change array data on function component

Question

I have a list when users click each item will change my array data.

my gender array first data is this:

[
  {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()
      );

when click index === 0

when click index === 1

It is when I use setTimeout

Asaf Aviv · Accepted Answer · 2019-11-05 07:42:41Z

1

You can easily fix this by mapping over the previous state and setting selected by comparing the indexes

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

answered Nov 5, 2019 at 7:42

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Morton Over a year ago

It works ! Thanks for your help truly. But why there is a issue in my way ? I think I set a different array to my state. Can you tell me why ? Thanks.

Saeed Zhiany · Accepted Answer · 2019-11-05 08:10:01Z

1

It's because you try to update the original data items directly within newGender.map iteration.

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

change it like below, it should be correct

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

edited Nov 5, 2019 at 8:10

answered Nov 5, 2019 at 5:39

Saeed Zhiany

2,1419 gold badges34 silver badges44 bronze badges

9 Comments

Morton Over a year ago

Thanks for your help, I must be tired. I correct my code to newGender, the selected result both of them still true.

Morton Over a year ago

I comment setGenderOption([...newGender]); the result will be [ {optionName: "Man", sex: 1, selected: false}, {optionName: "Woman", sex: 1, selected: true} ]

Saeed Zhiany Over a year ago

So weird, Can you check how time onItemPress being called when pressing one of the items? use console.log and print what is the value of the index i in each call.

Saeed Zhiany Over a year ago

then maybe it's because you update the original data directly, I have Updated my answer, you can check if it works or not.

Saeed Zhiany Over a year ago

As far as I know, in react (and react-native) compare objects using shallow compare (===) for re-rendering purpose, so when you try to change an item in an array directly, actually the array reference itself will not change, in other word objects must be updated through setState method to making sure their references will be changed. I'm not familiar with hook mechanism in new versions of React but probably it has the same mechanism that causes the strength behavior you saw in your code. I'll update my post if I found any other precise information about that.

|

Collectives™ on Stack Overflow

Can not use useState to change array data on function component

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related