使用 React Context 时如何修复此错误

Posted 2023-02-21

【中文标题】使用 React Context 时如何修复此错误

【英文标题】：How to fix this error when using React Context

【发布时间】：2019-09-21 13:02:24

【问题描述】：

我正在尝试在我的应用程序中实现 React-context 以摆脱道具钻探。在创建 contextProvider 时，我收到以下错误- “元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混合了设置默认和命名导入”。

const SharedThemeContext = React.createContext();

export class SharedThemeProvider extends Component 

  static propTypes = 
    children: PropTypes.func.isRequired
  
  constructor(props) 
    super(props);

    this.state = 
      isOpen: false,
      message: '',
    ;
  

  openSnackbar = (message) => 
    this.setState(
      message,
      isOpen: true,
    );
  ;

  closeSnackbar = () => 
    this.setState(
      message: '',
      isOpen: false,
    );
  ;

  render() 
    const  children  = this.props;

    return (
      <SharedThemeContext.Provider
        value=
          openSnackbar: this.openSnackbar,
          closeSnackbar: this.closeSnackbar,
          snackbarIsOpen: this.state.isOpen,
          message: this.state.message,
        
      >

        children
      </SharedThemeContext.Provider>
    );
  


export const SharedThemeConsumer = SharedThemeContext.Consumer;

【问题讨论】：

这就是我每次得到的......我尝试添加以下位，但仍然是同样的错误...... static propTypes = children: PropTypes.node.isRequired

解决了错误-我的 app.js 中有snackbarprovider 作为snackbar

【参考方案1】：

警告是否提供任何信息？