如何使用更新的数据重新渲染 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

我发现并且效果很好......

首先：添加一个状态，我们称之为refrshing并将其设置为false

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

第二个：在平面列表中添加两个道具

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

第三个：函数

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

第四个：在Api函数本身中

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

        setRefreshing(false);

    };

Answer 2

如果要重置数据，则需要有 2 组数据源。

1. 原创
2. 更新

使用“更新”数据作为您的主要数据源 因此，当您使用onRefresh 时，您只需将“更新”数据设置为“原始”中的数据

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

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

一路走来

ps：请编辑您的问题，因为它与平面列表无关，更多关于您的状态管理