Question

我正在研究一个使用上下文API，React钩子和功能组件的React JS项目。现在。我试图创建一个上下文提供程序，并尝试更改状态（如果其来自子组件）。但是它没有按预期工作。这是我到目前为止所做的。

我创建了具有以下定义的上下文提供程序组件。

import React, { Component } from 'react';
const { Provider, Consumer } = React.createContext({ currentLan: 'en' });

class LangContextProvider extends Component {
  state = {
    currentLan: 'en'
  }

  switchLang = () => {
    this.setState({
      currentLan: this.state.currentLan == 'it'? 'en': 'it',
    })
  }

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

export { LangContextProvider, Consumer as LangContextConsumer };

请注意switchLang函数，因为我试图从子组件中调用它来更新状态。

这是我的子组件，带有一个用于更新提供程序状态的按钮。

const SwitchLangButton = () => {

   return (
       <LangContextConsumer>
          {langContext => (
              <button onClick=() => { langContext.switchLang() }>Switch lang</button>)
          }  
       </LangContextConsumer>
   )
}

如您所见，单击按钮以切换语言时，我正在调用switchLang函数。

我将我的应用程序与提供者包装在一起，如下所示。

<LangContextProvider>
    <React.Fragment>
        <App />
    </React.Fragment>
</LangContextProvider>

单击按钮时，出现以下错误。

Uncaught TypeError: langContext.switchLang is not a function

我的代码有什么问题？

Answer 1

您需要传递switchLang函数：

<Provider value={{currentLan: this.state.currentLan, switchLang}}>{this.props.children}</Provider>

具有功能组件的React JS Context API无法正常工作

1 个答案: