React中FlatList删除条目后数据更新但页面无变化问题咨询

你代码中的FlatList组件绑定的数据源是组件顶部定义的静态常量data，该值初始化后不会发生变更。你执行删除逻辑时修改的是响应式状态state，FlatList没有绑定这个状态，自然不会触发列表重渲染刷新。

只需修改FlatList的数据源配置即可，可选优化filter的冗余逻辑：

• 将FlatList的data属性值从静态常量data改为响应式状态state
• （可选优化）filter回调无需额外判断返回值，直接返回布尔匹配条件即可简化代码

修正后的完整代码如下：

const App = () => {
  const data = [
    { id: 1, text: "item One" },
    { id: 2, text: "item Two" },
    { id: 3, text: "item Three" },
    { id: 4, text: "item Four" },
  ];

  const [state, setState] = useState(data);

  const onPressItem = (id) => {
    // 删除item逻辑
    const filterrArray = state.filter(val => val.id !== id);
    console.log("filteerArray " , filterrArray)
    setState(filterrArray)
  };
  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity style={styles.item}>
        <Text style={styles.text}>{item.text}</Text>
        <Button title="Supprimer" onPress={() => onPressItem(item.id)} />
      </TouchableOpacity>
    );
  };


  const handleCheck = () => { 
    console.log('__________________________')
    console.log(state)
  }
  return (
    <View style={{ flex: 1, padding: 0, marginTop: "10%" }}>
      <SafeAreaView>
        <FlatList
          data={state}
          keyExtractor={(item) => item.id}
          renderItem={renderItem}
        />
      </SafeAreaView>

      <Button
      title = "Verifier state"
      onPress={handleCheck}
      /> 
    </View>
  );
};

内容的提问来源于stack exchange，提问作者Garrix