반응 상태/소품이 업데이트되지 않습니다

Question

아래 코드를 가지고 있지만 내 상태가 업데이트되지 않습니다. 사용자가 올바른지 여부를 확인하기 위해 Angular http ajax-call을 사용하고 있습니다. 새 오류 메시지를 받침대로 전달하면 아무 일도 일어나지 않지만 구성 요소는 nextProps을 통해 액세스 할 수 있기 때문에 메시지를받습니다.

나는 또한 constructor, componentWillReceiveProps 및 shouldComponentUpdate 그냥 { this.props.error }을 렌더링로 이동하려고했지만, 그 중 하나가 작동하지 않았다.

이 내 DOM을 처음

// Some code 

.then(function(response){ 
    // Some code 
}, function(response){ 
    _this.renderLogin("User not found"); // Is sending the error-message to the function 
}); 

// Some code 

_this.renderLogin = function(error){ 
    render(
     <Login error={error} />, 
     document.getElementById("app") 
    ); 
}; 
_this.renderLogin("Standard"); 

이 로그인 구성 요소입니다 렌더링하는 기능을 렌더링 : 사전에 어떤 도움

이

class Login extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      error: this.props.error 
     } 
    } 
    componentWillReceiveProps(nextProps) { 
     if (nextProps.error !== this.state.error) { 
      this.setState({ error: nextProps.error }); 
      console.log(nextProps.error); // User not found 
      console.log(this.state.error); // Standard 
     }else{} 
    } 
    shouldComponentUpdate(nextProps, nextState){ 
     console.log(nextState.error); // User not found 
     console.log(nextProps.error); // User not found 
     console.log(this.state.error); // Standard 
     return true; 
    } 

    render(){ 
     return(
      <div> 
      { this.state.error } // Always showing: 'Standard' 
      </div> 
     ); 
    } 
} 
export default Login; 

감사를!

Answer 1

Login은 상태를 변경하는 데 아무런 영향을 미치지 않으므로 상태 유지 구성 요소가 아니어야합니다 ... 그 이유는 아무런 이유없이 상태를 수신하는 소품을 설정하는 것입니다. In에서 Reactive 상태는 props와 함께 전달되고 render는 새로운 prop 값으로 업데이트해야하는 구성 요소에서 트리거됩니다. 구성 요소가 이미 DOM에 부착되어 있기 때문에 아무것도 코드에서 발생하지 않습니다,하지만 코드가 있어야처럼 END_LINK하면 관심이

.then(function(response){ // Some code }, function(response){ _this.renderLogin("User not found"); // Is sending the error-message to the function });

뭔가 새로운 값으로 DOM에 reaffix 시도 사용자가 로그인했는지 여부를 평가하는 stateful 반응 구성 요소 내 상태는 반응 구성 요소 내에서 변경되어야하며 외부로 전달되지 않아야합니다. 아래 코드에서 여러분은 Login을 상태 비 저장으로 변경하지 않았지만 React 구성 요소 내에서 값을 음소거했기 때문에 여전히 작동합니다. 잘 설명 답변

class RenderLogin extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     errors: "Standard", 
 
    }; 
 
    this.changeError = this.changeError.bind(this); 
 
} 
 
    changeError() { 
 
    this.setState({errors:"Boom"}); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <Login error={this.state.errors} /> 
 
     <button onClick={this.changeError}>Change</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Login extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = { 
 
      error: this.props.error 
 
     } 
 
    } 
 
    componentWillReceiveProps(nextProps) { 
 
     if (nextProps.error !== this.state.error) { 
 
      this.setState({ error: nextProps.error }); 
 
      console.log(nextProps.error); // User not found 
 
      console.log(this.state.error); // Standard 
 
     }else{} 
 
    } 
 
    shouldComponentUpdate(nextProps, nextState){ 
 
     console.log(nextState.error); // User not found 
 
     console.log(nextProps.error); // User not found 
 
     console.log(this.state.error); // Standard 
 
     return true; 
 
    } 
 

 
    render(){ 
 
     return(
 
      <div> 
 
      { this.state.error } // Always showing: 'Standard' 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<RenderLogin />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<!-- begin snippet: js hide: false console: true babel: true --> 
 

 
<div id="app"></div>