Material-UI TextField errorTextがObject.assignで状態を設定しても表示されない

Question

ログインフォームを検証し、子コンポーネントからpropsとして渡されたエラーを動的に表示しています。 Object.assignを使用してエラーオブジェクトを設定すると、errorTextはフィールドの下に表示されません。 setState（）を使用すると、errorTextが表示されますが、stateの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> 

任意のヘルプは高く評価されるようにIが反応/材料-UIの初心者くさいです。

Answer 1

setStateを使用して（Object.assignではなく）状態を変更します。あなたが状態を更新しているとき。また、Object.assignの使用だけで何が変わったのか交換し、新しいプロパティを設定するSETSTATEを使用すると

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

のようになります。

Object.assign(newObject, ...objectsToCopyFrom) 

です。

this.setState({ errors: newErrors });