按下项目时重新渲染平面列表数据

Question

我使用 react-native flatlist 来呈现我的数据。当在 flatlist 中按下一个项目时，我想在 flatlist 中重新呈现数据。如何实现？


  const data = [
    {
        id: 1,
        title: 'First Item',
        isShow: 0
    },
    {
        id: 2,
        title: 'Second Item',
        isShow: 0
    }]
       
    const renderItem = ({ item }) => {
        return (
            <TouchableOpacity onPress={() => onPress(item}>
                <Text>{item.title}</Text>
            </TouchableOpacity/>
              );
    };

    const onPress = (item) => {
        item.isShow = 1;
    }

    <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
    />

当 item.isShow = 1 平面列表数据应该重新呈现时。

Answer 1

首先你在FlatList中使用的数据必须是一个状态：

const [data, setData] = useState([]);

在你的onPress方法中你必须这样做

 const onPress = (item) => {
  const newData =  data.map(dataWithIsShow=> {
     if(dataWithIsShow.id === item.id) {
       dataWithIsShow.isShow = 1
       return dataWithIsShow;
     }
     return dataWithIsShow
   } ) 
   setData(newData)
    }

明白了吗？如果您有更多疑问，请问:)。

按下项目时重新渲染平面列表数据

Re-render flatlist data when item is pressed

react-native

react-native-flatlist

flatlist