平面列表不会在状态更新时重新呈现

Question

搜索了很久之后。我发现Flatlist中的Extradata重新呈现了Flat List，但就我而言，它没有正确发生。

我有一个固定的列表，每行都有一个开关。在列表上方有一个开关，在切换上面的开关时，列表中的所有开关都应将其状态更改为与上面的开关相同（全部为真或全部为假）。

我面临的问题是，当我第一次切换以上开关时，平面列表开关保持不变，但是当我再次切换以上开关时，平面列表开关保持相反。而且这种情况是相反的

这是我的数据样本

[ 
  Object {
    "isPresent": false,
    "registration_id": "1",
    "name": "Name1",
  },
  Object {
    "isPresent": false,
    "registration_id": "2",
    "name": "Name2 .",
  },
  Object {
    "isPresent": false,
    "registration_id": "3",
    "name": "Name3",
  },
]

这是全部切换的代码

const [stData, setStData] = useState([]);
const [toggleAll, setToggleAll] = useState(false);
useEffect(() => {
    if (toggleAll === false) {
      let data1 = stData;
      for (let i = 0; i < data1.length; i++) {
        data1[i].isPresent = false;
      }
      setStData(data1);
      console.log(data1);
    } else {
      let data1 = stData;
      for (let i = 0; i < data1.length; i++) {
        data1[i].isPresent = true;
      }
      setStData(data1);
      console.log(data1);
    }
    console.log(toggleAll);
  }, [toggleAll]);

这是平面列表

       <FlatList
            data={stData}
            extraData={stData}
            keyExtractor={(item) => item.registration_id}
            renderItem={(itemData) => (
              <View style={styles.container1}>
                  <Text style={styles.title}>{itemData.item.name}</Text>
                <Switch
                  trackColor={{
                    true: "red",
                  }}
                  thumbColor={"white"}
                  value={itemData.item.isPresent}
                  onValueChange={() =>
                    setStData(
                      stData.map((val) =>
                        val.registration_id === itemData.item.registration_id
                          ? {
                              ...val,
                              isPresent: !itemData.item.isPresent,
                            }
                          : val
                      )
                    )
                  }
                />
              </View>
            )}
          />