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组数据源。

原始
已更新

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

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

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

这种方式

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

Answer 2

那我发现并运作良好...

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

this.state.data.sort((a, b) => a.item.timeM > b.item.timeM ? 1:-1).map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

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

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

third：函数

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

第四：在Api函数本身中

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

如何使用更新的数据进行FlatList重新渲染

2 个答案: