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

Question

我是上下文 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;

Answer 1

您的代码应该可以工作，但是：

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

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