Question

我无法更改复选框状态。我的Mongoose模型中的默认选项为false。我可以成功获取它来更新用户的个人资料，并且只在第一次时提交（它将更改为true），但是当他们返回以编辑个人资料（相同的路线）并$ set个人资料字段时，它不会将“ displayEmailOnProfile”的布尔值更改为false。它只是保持选中状态。 console.logs（）也很奇怪。选中该框时，它会打印出true，然后displayEmailOnProfile的状态为false。如果未选中，则displayEmailOnProfile的状态为true？

然后当我点击“提交”时，它不是在更新猫鼬模型上的任何内容吗？

constructor (props) {
    super(props);
    this.state = {
        displayEmailOnProfile: false,
        errors: {}
    }
    this.onSubmit = this.onSubmit.bind(this);
    this.onCheck = this.onCheck.bind(this);
}
componentWillReceiveProps(nextProps) {
        // Set component fields state
        this.setState({
            displayEmailOnProfile: profile.displayEmailOnProfile,
        });
    }
}

onChange = (e) => {
    this.setState({[e.target.name]: e.target.value});
}

onSubmit = (e) => {
    e.preventDefault();

    const profileData = {
        displayEmailOnProfile: this.state.displayEmailOnProfile
    }

    this.props.createProfile(profileData, this.props.history);
}

onCheck = (e) => {
    console.log(this.state);
    console.log(e.currentTarget.checked);

    this.setState({
        displayEmailOnProfile: e.currentTarget.checked
    });
}

这是HTML / React标记

<div className="form-check mb-4">                 
    <input className="form-check-input" type="checkbox"  id="defaultCheck1" name="displayEmailOnProfile" checked={this.state.displayEmailOnProfile} onChange={this.onCheck}></input>
    <label class="form-check-label" for="customCheck1">Display Email On Profile</label>
</div>

Answer 1

您的代码完全正确，console.log正在打印正确的内容。您正在console.log方法内进行onCheck －正在打印当前值。

发生的事情是，当您执行set state时，生命周期方法将被异步调用，以更新组件并设置状态。因此，如果您在设置状态（同步状态）后立即对状态进行console.log操作，它将打印先前的状态，因为它尚未更新。

以下是生命周期方法，称为：

shouldComponentUpdate
componentWillUpdate
componentDidUpdate

因此，如果要检查值是否已更新，则应在console.log内执行componentDidUpdate。它将告诉您您的更新状态。

为了解释其工作原理，我在code sandbox上为您创建了一个简短的演示示例。解释工作原理并显示您的代码正确。

现在，就Mongoose不会更新值而言，如果不查看您的代码，我什么也说不出来。您必须在更新值的代码中犯一些错误。我不确定，但是请交叉检查您是否使用与submit相同的页面进行更新，请确保将请求从post更改为put，并检查如何更新值使用猫鼬。

状态更改无法保存在React和猫鼬中吗？

1 个答案: