javascript - 通过 App Context 传递 this.state 变量

Question

当我使用函数 getData() 设置数组数据，然后尝试在函数 updateData() 中调用它时，出现错误，指出 this.state.data 未定义。关于如何将 this.state 变量从一个函数传递到应用程序上下文提供程序中的另一个函数，有什么想法吗？

示例代码如下:

有什么想法吗？谢谢!

export class AppProvider extends React.Component {
         constructor(props) {
           super(props);
           (this.state = {
             data: [],
           });
         }

         getData = async () => {
            const data = "abc"
            this.setState({ 
                data,
            });
        }

        updateData = async () => {
          console.log(this.state.data)
}

         render() {
           return (
             <AppContext.Provider value={this.state}>
               {this.props.children}
             </AppContext.Provider>
           );
         }
       }

Answer 1

我想说的三件事

1. 您想要单独添加状态变量，因此您需要执行 value={{data:this.state.data}}
2. 如果您计划在另一个组件中使用这些函数，您也想将这些函数添加到 value 属性中

3. 从函数中删除async，因为没有 Promise 需要解析

     export class AppProvider extends React.Component {
         constructor(props) {
           super(props);
           this.state = {
             data: []
           };
         }
   
         getData = () => {
           const data = "abc";
           this.setState({
             data
           });
         };
   
         updateData = () => {
           console.log(this.state.data);
         };
   
         render() {
           return (
             <AppContext.Provider
               value={{
                 data: this.state.data,
                 getData: this.getData,
                 updateData: this.updateData
               }}
             >
               {this.props.children}
             </AppContext.Provider>
           );
         }
       }
   

在一个小例子中检查了这一点，CodeSandbox here