reactjs - 如何成功地将一个组件的状态从另一个更改？

Question

我在另一个组件的 onClick 函数中的一个组件中调用 setState，但它说 this.setState 不是函数，并且组件在 componentWill 更新中重复调用 setState。我该如何解决？这是 app.js 文件的相关内容：export default class App extends 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} />
    )
}

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

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>
    )
}

标签： reactjs

Answer 1

您必须将setActiveScreen函数绑定到thisApp 组件的构造函数中。

像这样：

constructor(props) {
    super(props);

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

或者，正如@Nico 在评论中所说，使用箭头功能。

像这样：

setActiveScreen = key => {
  // logic
}