Невозможно обновить состояние внутри компонента Context.Provider в React - PullRequest
Новая
       79

Невозможно обновить состояние внутри компонента Context.Provider в React

0 голосов
/ 19 июня 2020

Я передаю объект из компонента входа в систему, и после перезагрузки страницы объект в поставщике контекста теряет стадию, поэтому я пытаюсь обновить его через localStorage, но он не обновляет состояние. Я также попытался сделать вызов api там, чтобы я мог обновить состояние объекта поставщика контекста через это, но ничего не работает. Любое решение для этого? ... 

 import React, { Component, createContext } from "react";
import Context from "./context";

class AppProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      object: {},
      toggle: this.toggle
    };

    this.toggle = () => {
      if (
        localStorage.getItem("token") &&
        Object.keys(this.state.object).length === 0
      ) {
        this.setState({ sessionObject: localStorage.getItem("token") });
        console.log("i am called");
        console.log(localStorage.getItem("token"));
        console.log(this.state);
      } else {
        console.log("i am not fired");
      }
    };
  }
  setObject(object) {
    this.setState({ object: object });
  }

  // componentDidUpdate(prevProps, prevState) {
  //   if (this.state.object !== prevState.object) {
  //     localStorage.setItem("token", JSON.stringify(this.state.object));
  //     if (this.state.object !== undefined) {
  //       //object crashes when I uncomment this
  //       //this.setState({object: prevState.obj})
  //     }
  //   }
  // }
  componentDidUpdate() {
    if (localStorage.getItem("token")) {
      this.toggle();
    } else {
      console.log("no");
    }
  }

  render() {
    console.log("Provider", this.state);
    return (
      <Context.Provider
        value={{
          object: this.state.object,
          setObject: this.setObject.bind(this)
        }}
      >
        {this.props.children}
      </Context.Provider>
    );
  }
}
export default AppProvider;

...

мой код https://codesandbox.io/s/trusting-hertz-tql5e?file= / context / provider. js

...