Reactjs 如何成功地从一个组件更改另一个组件中的状态？

我在另一个组件的onClick函数中调用一个组件中的setState，但它说。setState不是一个函数，组件在组件中重复调用setState将更新。我该如何解决这个问题？ 这是app.js文件的相关内容： 导出默认类App扩展React.Component{

constructor(props) {
    super(props);

    this.state = {
        activeScreen: 'dashboard'
    }
}

setActiveScreen(key) {
    this.setState({
        activeScreen: key
    })
}

render() {
    return (
        <NavBar activeScreen={this.state.activeScreen} setActiveScreen={this.setActiveScreen} />
    )
}

构造函数（道具）{
超级（道具）；
此.state={
动态屏幕：“仪表板”
}
}
设置活动屏幕（键）{
这是我的国家({
活动屏幕：键
})
}
render（）{
返回(
)
}

这是导航栏组件的相关部分：

class NavBar extends Component {

render() {
    return (
        <li className="nav-item" key={key}>
             <Link className={`nav-link ${this.props.activeScreen == i.key ? 'active' : ''}`} to={i.to} onClick={() => {this.props.setActiveScreen(i.key)}}>
                 {i.label}
             </Link>
        </li>
    )
}

类导航栏扩展组件{
render（）{
返回(

{this.props.setActiveScreen（i.key）}>
{i.label}

)
}

您必须将

setActiveScreen

函数绑定到应用程序组件构造函数中的

this

像这样：

constructor(props) {
    super(props);

    this.state = {
        activeScreen: 'dashboard'
    }
    this.setActiveScreen = this.setActiveScreen.bind(this);
}

setActiveScreen = key => {
  // logic
}

或者，正如@Nico在评论中所说，使用箭头函数

像这样：

constructor(props) {
    super(props);

    this.state = {
        activeScreen: 'dashboard'
    }
    this.setActiveScreen = this.setActiveScreen.bind(this);
}

setActiveScreen = key => {
  // logic
}

---

如果在基于类的组件中有此函数，则可以将当前函数更新为箭头函数，如下所示

    setActiveScreen = (key) => {
     this.setState({
        activeScreen: key
     })
    }

问题是，您正在访问它，而没有给出上下文

另一种方法是将其绑定到函数。下面是在构造函数中以另一种方式进行绑定的示例

  constructor(props) {
 super(props);

 this.setActiveScreen = this.setActiveScreen.bind(this);
 // Other code ....
}

---

首先，每个方法如何使用setState必须在构造函数中绑定，如下所示：

this.setActiveScreen=this.setActiveScreen.bind（this）；

其次，为了获得良好的实践效果，请在

NavBar

中定义您的道具，如下所示：

static propTypes = {
        setActiveScreen: PropTypes.func.isRequired,
    }

第三，在渲染中使用箭头功能不是一个好的做法。因此，您必须：

使用来自的

partial

看起来是这样的：

---

或者，您可以在NavBar组件中定义一个特定的方法，该方法由onClick调用，并在默认情况下由onClick提供的事件对象中检索密钥。您应该绑定setActiveScreen或使用arrow函数