如何在 ajax 成功后更新新上下文提供程序的状态

Question

新的 React，尝试在 API 调用成功后更新在新的 react 上下文提供程序中初始化的状态。我正在使用 反应 16.3 .

无法更新状态值，按照记录的步骤进行操作，但仍然无法实现。

这是我尝试过的：

.HTML：

<MyProvider>
<MyConsumer>
{context => (
{context.updateInitialData(this.props)}
)}
</MyConsumer>
</MyProvider>

.js：

import React, { Component } from 'react';
const MyContext = React.createContext();
export const MyConsumer = HeaderContext.Consumer;
export class MyProvider extends Component {
state = {
data: null,
updateInitialData: this.updateInitialData
};
updateInitialData = () => {
this.setState({data: this.state.data})
}
render() {
return (
<MyContext.Provider
value={{
state: this.state,
updateInitialData: this.updateInitialData
}}
>
{this.props.children}
</MyContext.Provider>
);
}
}

Answer 1

问题是，现在即使您使用 updateInitialData 正确设置了状态，您实际上也在渲染中调用函数，然后调用 setState 触发重新渲染并继续循环。您需要的是编写 HOC 并更新生命周期方法中的初始数据

import React, { Component } from 'react';
const MyContext = React.createContext();
export const MyConsumer = MyContext.Consumer;
export class MyProvider extends Component {
// you don't need to store handler in state since you are explicitly passing it as a context value
state = {
data: null
};
updateInitialData = (data) => { // getting data from passed value
this.setState({data: data})
}
render() {
return (
<MyContext.Provider
value={{
state: this.state,
updateInitialData: this.updateInitialData
}}
>
{this.props.children}
</MyContext.Provider>
);
}
} 

组：

const withContext = (Component) => {
return class App extends React.Component {
render() {
return (
<MyConsumer>
{context => (<Component {...this.props} context={context} />)}
</MyConsumer>
)
}
}
}

然后你会像

class Consumer extends React.Component {
componenDidMount() {
this.props.context.updateInitialData(this.props.data);
}
render() {
}
}
export default withContext(Consumer);

然后

<MyProvider>
<Consumer data={this.props}/>
</MyProvider>

Answer 2

我不确定您是否复制粘贴错误，但您没有使用提供给处理程序的数据更新您的状态：

updateInitialData = () => {
this.setState({data: this.state.data}) // ??? its doing nothing
}

尝试：

updateInitialData = (data) => {
this.setState({ data }) 
}