按下项目时重新呈现平面列表数据答案

【问题标题】：Re-render flatlist data when item is pressed按下项目时重新呈现平面列表数据
【发布时间】：2021-07-27 11:08:43
【问题描述】：

我使用 react-native 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 flatlist 数据应该重新渲染时。

【问题讨论】：

看看reactjs.org/docs/react-component.html#forceupdate
您可以使用useState(data) 和setState(...)，这将触发重新渲染。请记住，您不应该直接改变对象的值，因为 React 无法跟踪这些更改

标签： react-native react-native-flatlist flatlist

【解决方案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)
    }

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

【讨论】：