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

Question

I will only show code that is relevant. This is the code from the 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>
    );
}

}

The code from the child component Navbar is:

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;

The error I get is Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount . The stack trace says it is in setActiveScreen . I am unable to fix this problem.

My syntax is all fine but may not seem so as I have deleted lots of unrelated code.

Answer 1

You are invoking the function with no parameters. Update your code with this;

setActiveScreen={this.setActiveScreen}

OR

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