Material-UI 当我使用 Object.assign 设置状态时，TextField 错误文本未出现

Question

我正在验证登录表单并动态显示错误，这些错误作为道具从子组件传递。当我使用 Object.assign 设置我的错误对象时，错误文本不会出现在字段下方。如果我使用 setState()，将显示错误文本，但状态中的错误对象不会更新所有错误。我相信这与 setState() 的异步性质有关。

login_page.js（父组件）

  constructor(props) {
        super(props);

        this.state = {
            login: {
                userName: "",
                password: ""
            },
            errors: {}
        };
    }

    loginFormIsValid() {
        var formIsValid = true;
        this.setState({
            errors: {}
        });

        if (this.state.login.password === "") {
            Object.assign(this.state, {
                errors: Object.assign(this.state.errors, {password: "Password is required"})
            });
            formIsValid = false;
        }

        if (this.state.login.userName === "") {
            Object.assign(this.state, {
                errors: Object.assign(this.state.errors, {userName: "Username is required"})
            });
            formIsValid = false;
        }

        return formIsValid;
    }

login_form.js（子组件）

<form
    <TextField
        name="userName"
        errorText={this.props.errors.userName} />
    <br />
    <TextField
        name="password"
        errorText={this.props.errors.password} />
    <br />
    <RaisedButton
        label="Log in"
        type="submit" />
</form>

我是一个 React / Material-UI 新手，所以感谢任何帮助。

Answer 1

使用 setState 更改状态（不是 Object.assign）。所以当你更新状态时。此外，Object.assign 的用法是

Object.assign(newObject, ...objectsToCopyFrom)

看起来像

var newErrors = Object.assign(this.state.errors, {password: "Password is required"});

然后使用 setState 设置新的属性，只是替换已更改的内容。

this.setState({ errors: newErrors });

Material-UI 当我使用 Object.assign 设置状态时，TextField 错误文本未出现

Material-UI TextField errorText not appearing when I set state with Object.assign

javascript

reactjs

material-ui