Как сделать повторный рендеринг FlatList с обновленными данными

Question

Я создаю своего рода компонент списка. в этом компоненте я позволяю пользователю вносить некоторые изменения в плоский список. Я пытаюсь добавить опцию того, что если пользователь потянет, чтобы refre sh для возврата назад, основные данные были обработаны до его модификации. Нужна помощь, чтобы решить эту проблему

     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

Это то, что я нашел и работал хорошо ...

первый: добавьте состояние и давайте назовем его обновленным и установим его в 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: отредактируйте ваш вопрос, потому что он не связан с простым списком, подробнее о вашем управлении состоянием