反应上下文不保存更新

Posted 2023-03-16

【中文标题】反应上下文不保存更新

【英文标题】：React context not saving updates

【发布时间】：2020-05-16 21:57:49

【问题描述】：

我为音乐/艺术家创建了一个 React 项目。

我正在使用 React 上下文跨组件访问艺术家数据：

import React,  createContext, useState  from "react";

export const ArtistContext = createContext(null);

const ArtistContextProvider = props => 
    const [artists, setArtists] = useState([]);

    const addArtist = new_artist => 
        setArtists([...artists, new_artist])
    ;

    return (
        <ArtistContext.Provider value=artists, addArtist>
            props.children
        </ArtistContext.Provider>
    );
;

export default ArtistContextProvider;

我可以成功从艺术家上下文对象中获取数据，也可以执行de addArtists方法，但是我传递给函数的艺术家没有保存，变量stills返回默认值。

我在一个组件中的用法：

const  artists, addArtist  = useContext(ArtistContext);

useIonViewWillEnter(() => 
    api.get('artists?manager=1'))
    .then(function(response) 
        artist = response.data.items[0];
        addArtist(artist);
        window.location.href = '/artist/' + artist.id + '/tabs';
    )
    .catch(error => console.log(error));
);

如果我在 addArtist 方法中登录，我可以看到艺术家对象是有效的，但是如果我再次登录艺术家数组，它具有初始值。

我尝试了不同的方法和语法，例如带状态的类组件、带 useState 的功能组件……所以我猜我的语法是正确的，但我缺少一些关于 React 的关键概念。 这是我第一个使用 React 的项目，所以我可能遗漏了一些东西，但即使在阅读了上下文文档之后我也无法弄清楚。

【参考方案1】：

您需要将您的状态/上下文对象存储到 localStorage、sessionStorage、cookie 或服务器，因为访问不同的 url 路径会刷新页面。

此链接可以帮助您在刷新页面时存储您的状态。 How to maintain state after a page refresh in React.js?

今天刚遇到这个。我花了 2 天时间来解决这个问题，哈哈