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)
    }

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

按下 item 时重新渲染 flatlist 数据

1 个答案: