Material-UI TextField errorText가 Object.assign을 사용하여 상태를 설정할 때 나타나지 않습니다.

Question

로그인 폼의 유효성을 검사하고 자식 구성 요소의 소품으로 전달 된 오류를 동적으로 표시하고 있습니다. Object.assign을 사용하여 오류 객체를 설정하면 errorText가 필드 아래에 표시되지 않습니다. setState()를 사용하면 errorText가 표시되지만 상태의 오류 객체는 모든 오류로 업데이트되지 않습니다. 나는 이것이 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> 

나는 그래서 어떤 도움이 평가되는 반작용/재료-UI의 newb에게입니다.

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