Question

我为音乐/艺术家创建了一个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;

我可以成功地从artist上下文对象获取数据，并执行de addArtists方法，但是传递给该函数的artist不会保存，并且变量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方法中登录，我可以看到artist对象是有效的，但是如果我再次登录artists数组，则它具有初始值。

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

Answer 1

您需要将状态/上下文对象存储到localStorage，sessionStorage，Cookie或服务器，因为访问其他URL路径会刷新页面。

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

今天刚遇到这个问题。花了我两天时间解决这个问题

反应上下文不保存更新

1 个答案: