Question

我验证登录表单并动态显示错误，从子组件作为道具传递。当我使用Object.assign设置我的错误对象时，errorText不会出现在该字段下方。如果我使用setState（），将显示errorText，但状态中的errors对象不会更新所有错误。我相信这与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 newb，所以感谢任何帮助。

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 });

使用Object.assign设置状态时，不显示Material-UI TextField errorText

1 个答案: