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

Posted 2023-04-14

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

【英文标题】：State doesn't change after fetching data in React context API

【发布时间】：2020-04-16 19:18:03

【问题描述】：

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

【问题讨论】：

信号是数组还是对象？

信号是一个数组！

【参考方案1】：

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

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

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

【讨论】：

是的，我肯定不会明白，这可能是一个“回调地狱”问题，因为我在另一个组件中使用了这个提供程序！