如何使用更新的數據重新渲染 FlatList

Question

我正在構建一種列表組件。 在該組件中，我允許用戶在平面列表中進行一些更改。 我正在嘗試添加選項，如果用戶拉動刷新以返回主數據在他的修改之前呈現需要幫助來解決這個問題

     const [text, setText] = useState({});
        const [switchValue, setSwitchValue ] = useState(false);
        const [refresh, setRefresh] = useState(false);


    const _handleOnPress = ({index}) => {
            const contentCopy = text.content;
            const current = contentCopy[index];
            const updatedContent = [...contentCopy.slice(0, index),
            {...current, repeat: current.repeat - 1}, ...contentCopy.slice(index + 1)];

            setText({...text, content:updatedContent});

        };

    const onRefresh = () => {}

      return (
             <View>

            <FlatList 
            data = {text.content}
            keyExtractor = {(text) => text.id}
            style = {styles.flatList}
            refreshing = {refresh}
            onRefresh = {onRefresh}
            extraData = {text.content}
            renderItem = {({item, index}) => {
                {if( item.repeat === 0 ) {
                    return null
                }
                return (
                    <View style = {styles.listContainer}>
                        <TouchableOpacity onPress = {() => _handleOnPress({item, index})}>
                        <Amiri text = {item.text} />
                        <Spacer />
                        <PlaySound  link = {item.audio_url} />
                        </TouchableOpacity>
                        <View style = {styles.repeatContianer} >
                        <Spacer>
                            <Text style = {styles.repeatText}> {item.repeat} </Text>
                        </Spacer>
                        </View>
                    </View>
                );
            }

            }}
            />
        </View>
    );
};

Answer 1

如果要重置數據，則需要有 2 組數據源。

1. 原來的
2. 更新

使用“更新”數據作為您的主要數據源因此，當您使用onRefresh時，您只需將“更新”數據設置為“原始”數據

const [originalText] = React.useState({});
const [text, setText[ = React.useState({});

onRefresh = () => {
   setText(originalText)
}

沿途的東西

ps：請編輯您的問題，因為它與平面列表無關，更多關於您的 state 管理

Answer 2

我發現並且效果很好...

首先：添加一個 state 我們稱之為 refrshing 並將其設置為 false

const [refreshing, setRefreshing ] = useState(false);

第二：在平面列表中添加兩個道具

refreshing = {refreshing} // same state //
onRefresh = {onRefresh} // function to be called back //

第三：function

const onRefresh = () => {
setRefresh(true);
Api () // get request again of data // 
}

第四：在Api function本身

const Api = async() => {
        const response = await myApi.get(`/${id}`);
        setText(response.data);

        setRefreshing(false);

    };