如何使用 onClick 函数在子组件中设置父组件的状态？

Question

我只会显示相关的代码。这是来自parent component的代码：

export default class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        activeScreen: 'dashboard',
        authenticatedUser: this.getAuthenticatedUser(),
    }
}

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

style = (label) => {
    if (label === 'Dashboard') {
        return {'border-top': '5px solid red'}
    }
}

render() {
    return (
        <div>
            {/* {this.serviceWorker()} */}
            <ToastContainer transition={Slide} />
            <Router>
                <Switch>
                    <NavBar  
authenticatedUser={this.state.authenticatedUser} activeScreen={this.state.activeScreen} 
setActiveScreen={this.setActiveScreen()} />

                </Switch>
            </Router>
        </div>
    );
}

}

子组件Navbar的代码是：

class NavBar extends Component {

constructor(props) {
    super(props);
}

adminMenu() {
    return (
        <div className='admin-menu'>
            {this.adminNav().map((i, key) => (
                        <li className="nav-item" style={this.props.style(i.label)} key={key}>
                            <Link className={`nav-link ${this.props.activeScreen == i.key ? 'active' : ''}`} to={i.to} onClick={() => this.props.setActiveScreen(i.key)}>
                                <i className={`fa fa-fw fa-${i.icon}`} aria-hidden="true"></i>
                                {i.label}
                                {this.props.activeScreen == i.key &&
                                    <span className="sr-only">(current)</span>
                                }
                            </Link>
                        </li>
            ))}
        </div>
    )
}

render() {
    return (
        {this.adminMenu()}
    );
}

adminNav() {
    return [
        {
            label: 'Dashboard',
            icon: 'tachometer',
            key: 'dashboard',
            to: '/',
            active: true,
            admin: false,
            sales: false
        },
        there are more of these objects
    ]
}
}

export default NavBar;

我得到的错误是在现有状态转换期间无法更新（例如在render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount。堆栈跟踪显示它位于setActiveScreen。我无法解决这个问题。

我的语法一切正常，但可能看起来不是这样，因为我删除了很多不相关的代码。

Answer 1

您正在调用没有参数的函数。用这个更新你的代码；

setActiveScreen={this.setActiveScreen}

或

setActiveScreen={(key) => this.setActiveScreen(key)}