时间戳

首页 > 解决方案 > 在 React 上下文 API 中获取数据后状态不会改变

reactjs - 在 React 上下文 API 中获取数据后状态不会改变

问题描述

我是上下文 API 的新手，我尝试了一个简单的案例，它运行良好，现在我无法在从端点获取数据后将状态设置为我的上下文 API 提供程序，但它没有改变！

这是我的代码：

export const SignalementContext = new createContext();
class SignalementContextProvider extends Component {
state = {
  signalements: []
};

componentDidMount() {
  this.loadSignalement();
}
loadSignalement() {
  Object.assign(axios.defaults, { headers: { accept: "application/json" } });
  axios
    .get("http://localhost:3005/signalements")
    .then(res => {
      console.log("hani huni" + res.data);
      const signalements = res.data;
      this.setState({ signalements: signalements });
    })
    .catch(function(error) {
      if (error.response) {
        alert(
          "Code: " +
            error.response.data.error.code +
            "\r\nMessage: " +
            error.response.data.error.message
        );
      } else {
        console.log("Error", error.message);
      }
    });
}
fetch = async () => {};
render() {
  return (
    <SignalementContext.Provider value={{ ...this.state }}>
      {this.props.children}
    </SignalementContext.Provider>
  );
}
}

export default SignalementContextProvider;

标签： reactjsstatereact-context

解决方案

您的代码应该可以工作，尽管：

  • 您不想将状态传播到新对象中。该上下文值在每次渲染时都是新的，您不希望这样，最好像这样写value={this.state}
  • 您应该只导出 Consumer from SignalementContext，因为您正在通过实现自己的提供程序SignalementContextProvider

您确定您的代码loadSignalement不会捕获吗？

推荐阅读