React Native State 在不应该更新的时候更新

Question

I have filterData which comes from a controller, so i set filterData to options, for the UI, Like this

const [state, setState] = React.useState({
    options: filterData,
  });

filter data is this

[{"List": [{"Name": "TEST1", "isSelected": false}, {"Name": "TEST2", "isSelected": false}, {"Name": "TEST3", "isSelected": true}], "Type": "Type"},
{"List": [{"Name": "TEST4", "isSelected": false}, {"Name": "TEST5", "isSelected": false}, {"Name": "TEST6", "isSelected": true}], "Type": "Type2"}]

I render it in a flatlist and then map the List, this is the code for my flatlist

 <FlatList
        style={{flex: 1, backgroundColor: colors.white}}
        data={state.options}
        keyExtractor={(_, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <View style={{marginBottom: widthPercentageToDP(5)}}>
              <Text>
                {item.Type}
              </Text>
              <View
                style={{
                  flexDirection: 'row',
                  flexWrap: 'wrap',
                }}>
                <View
                  style={{
                    marginRight: 8,
                    marginBottom: 8,
                  }}>
                  <TouchableOpacity>
                    <Text>
                      Select All
                    </Text>
                  </TouchableOpacity>
                </View>
                {item.List.map((e: any, idx: number) => (
                  <View
                    key={idx}>
                    <TouchableOpacity
                      onPress={() =>
                        handleSelect(idx, item.Type)
                      }
                     >
                      <Text>
                        {e.Name}
                      </Text>
                    </TouchableOpacity>
                  </View>
                ))}
              </View>
            </View>
          );
        }}
        </View>
      </View>
      );
     }}
   />

as you can see from above, i will have some buttons . And if the button is clicked, it will call handleSelect function. which is this

const handleSelect = async (idx: number, type: string) => {
    let arr = [...state.options];

    arr.map((item) => {
      if (item.Type === type) {
        item.List[idx].isSelected = !item.List[idx].isSelected;
      }
    });

    console.log(state.options)
  };

i didnt change the state of the options like the code below, only console.log

setState((prevState) => ({
      ...prevState,
      options: arr,
    }));

The problem is, in the log when i clicked and run that function, state.options will also change. it will have the same data as arr . Even filterData also change when i console.log in handleselect . I already checked my controller and it didnt trigger any function. Does anyone know why it update all of my variable?

Answer 1

Problem: Mutating State

When you create a copied array like let arr = [...state.options]; , the variable arr is a new array, but the elements of that array are references to the same objects as in the original state.options . So when you toggle isSelected on an element of arr , you are also changing the value in your state.

This line is the where the mutation occurs:

item.List[idx].isSelected = !item.List[idx].isSelected;

Your arr.map() doesn't actually return anything. .map() is meant to map an element to a new value so your callback needs to return the new value. You probably meant to use .forEach() . We actually do want .map() though, but we need to return the item .

As a sidenote, you can have multiple useState hooks per component so you don't need to use object properties like you would in a class component. What you have is not a problem, but you can make it simpler:

const [options, setOptions] = React.useState(filterData);

Solution: Replace the Object

You need to create a copied object for any objects where you are changing properties. You don't actually need to copy the whole array because .map already returns a copy.

const handleSelect = async (idx: number, type: string) => {
  setOptions(options.map((item) => {
    if (item.Type === type) {
      // return a copy
      return {
        ...item,
        // replace the whole List property with a mapped copy
        List: item.List.map( (obj, i) => {
          if ( i === idx ) {
            // return a copy with a new value of isSelected
            return {
              ...obj,
              isSelected: !obj.isSelected,
            }
          } else {
            // return the same item
            return obj;
          }
        }
        )
      };
    } else {
      // return the same item
      return item;
    }
  }));
};

The mapping is complicated because you have an object within an array within an object within an array. You might want to store your selections separate from that messy structure.

We can make the mapping shorter by using the ternary operator instead of if / else .

const handleSelect = async (idx: number, type: string) => {
    setOptions(
      options.map((item) =>
        item.Type === type
          ? {
              ...item,
              List: item.List.map((obj, i) =>
                i === idx
                  ? {
                      ...obj,
                      isSelected: !obj.isSelected
                    }
                  : obj
              )
            }
          : item
      )
    );
  };