Question

我正在尝试解决在浏览器重新加载时重新设置组件状态的问题。

要点是，React Context中有一个过滤器函数，该函数使用“ this.props.match.params”的路由器工具获取所需的图像ID，然后调用该过滤器函数以在包含所有图像的共享状态。初始安装就很好，但是一旦浏览器在同一路径上重新加载，所有图像数据都会丢失。来自“参数”的图像ID似乎仍然存在，但是当再次调用filter函数时，它将获得未定义的值。

有什么想法吗？我已经为这个问题进行了研究，没有运气。还是一个相当新的编码器，因此如果我忽略了某些内容，请提前道歉。

使用React和React上下文。我尝试使用生命周期没有成功。还尝试了一些非常hacky的函数调用和/或Promise的函数，但是没有用。

初始安装时的工作生命周期，但在浏览器重新加载时没有。

export default class ImagePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user_id: this.props.match.params.user_id,
            image_id: this.props.match.params.image_id,
                image:[],
            redirect: false
        };
    }
    //set context for component
    static contextType = PhotoGramContext;
//set component state to selected image data
    componentWillMount() {
        const user = { id: this.state.user_id };
        this.context.checkIfLoggedIn(user);

                const getImageData = this.context.getImageData;
        const image_id = this.state.image_id;

        const selectedImage = new Promise((res, rej) => {
            return res(getImageData(image_id));
        });

        this.setState({
            image: selectedImage
        });
    }

这样的想法可以在一开始就设置图像数据，但是我不能这么早调用上下文。

export default class ImagePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user_id: this.props.match.params.user_id,
            image_id: this.props.match.params.image_id,
        image:this.context.getImageData(this.state.image_id),
            redirect: false
        };
    }
    //set context for component
    static contextType = PhotoGramContext;

您可以在组件状态中调用React上下文函数吗？

0 个答案: