Flatlist 没有 re-render 我的多选项目

Question

我是 react-native 的新手，最近我正在努力处理多选问题，并在平面列表中突出显示我的项目，谁能帮帮我！ :D

export default function opzioni( {navigation} ){
  
  const renderItem = ({item}) => (
      <TouchableOpacity style={item.stile} onPress={() => selectItem(item)}>
          <Text>{item.titolo}</Text>
      </TouchableOpacity>
  )

  const selectItem = (item) => {
      item.isSelect = !item.isSelect;
      item.stile = item.isSelect ? styles.itemSelected : styles.item;
     
  }



  return(
      <SafeAreaView style={styles.containerUtente}>
          <ScrollView>
          <Text>SELEZIONA COSA ELIMINARE:</Text>

          <FlatList
          numColumns={4}
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id.toString()}
          extraData={data}
       />

         </ScrollView>
      </SafeAreaView>
  )
}

数据是这样的，我有一个 object 标题显示在平面列表中，一个 id 在平面列表中给出，isSelect 用于选择或取消选择项目，最后是 re-render 不同颜色背景的项目

{
        titolo: "no alcol",
        id: 1,
        isSelect: false,
        stile: styles.item
    }

Answer 1

创建一个状态并将数据存储在其中...然后在 FlatList 中使用它...您的 select 函数也是错误的

Working Example

这样写

export default function opzioni({ navigation }) {
  const [Data, SetData] = React.useState(data);

  const renderItem = ({ item }) => (
    <TouchableOpacity
      onPress={() => selectItem(item.id)}
      style={item.isSelect ? styles.itemSelected : styles.item}>
      <Text>{item.titolo}</Text>
    </TouchableOpacity>
  );

  const selectItem = (id) => {
    let temp = [...Data];
    for (let i = 0; i < temp.length; i++) {
      if (temp[i].id === id) {
        temp[i].isSelect = temp[i].isSelect ? false : true;
        break;
      }
    }
    SetData(temp);
  };

  return (
    <SafeAreaView style={styles.containerUtente}>
      <ScrollView>
        <Text>SELEZIONA COSA ELIMINARE:</Text>

        <FlatList
          numColumns={4}
          data={Data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id.toString()}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

Flatlist 没有 re-render 我的多选项目

Flatlist doesn't re-render my items in multiselect

javascript

react-native

expo

react-native-flatlist