reactjs - 调用 Parent 方法时，子 setState 不起作用

Question

如果这是一个糟糕的问题，我是 React 的新手，很抱歉。我在更改子组件的状态然后调用更改父组件状态的方法时遇到问题。现在，当我触发应该更改状态的方法时，父状态会按应有的方式更改，但子状态根本不会更改。

当我删除父组件上的状态更改时，子组件会按预期更改。

这是父组件(已编辑以删除与问题无关的代码)

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loginModalName: "Log in"
        }
        this.bindedUpdateModalName = this.updateModalName.bind(this)
    }

    updateModalName(name) {
        console.log(name);
        this.setState({
            loginModalName: name
        });
    };

    render() {
        return (
            <Child loginSwitch = {this.bindedUpdateModalName}/>
        );
    }
}

这是子组件

class Child extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggingIn: true
        }
    }

    toggleLoggingIn = () => {
        this.setState({
            isLoggingIn: !this.state.isLoggingIn
        });
        console.log(this.state.isLoggingIn);
        this.props.loginSwitch(this.state.isLoggingIn ? "Log in" : "Register");
    };

    render() {
        return (
            <Button onClick={this.toggleLoggingIn} type="link" style={{paddingLeft: 0}}>register now!</Button>
        );
    }

没有错误消息，但我的日志显示

true
Log In

每次点击按钮

Answer 1

这是因为setState 是异步的。您需要等待状态更改发生(setState 或 componentDidUpdate 的第二个回调选项)，或者您可以使用像 isLogin 这样的变量来保持新的状态值。将您的处理程序更改为此

toggleLoggingIn = () => {
    const isLogin = !this.state.isLoggingIn
    this.setState({
        isLoggingIn: isLogin
    });
    console.log(this.props.loginSwitch);
    this.props.loginSwitch(isLogin ? "Log in" : "Register");
};

Check it out in action!

您遇到的问题是尝试在 antd 表单上使用本地状态。您应该使用父状态并作为 Prop 传递，或者使用 antd 更新 HOC 上的“状态”的方式