反応状態/小道具は更新されません

Question

私は以下のコードを持っていますが、私の状態は更新されません。 私はAngular http ajax-callを使用して、ユーザーが正しいかどうかを確認しています。新しいエラーメッセージをプロップとして渡すと、何も起こりませんが、コンポーネントはnextPropsからアクセスできるので、コンポーネントを受け取ってしまいます。

私もちょうど{ this.props.error }をレンダリングするconstructor、componentWillReceivePropsとshouldComponentUpdateをスキップしようとしたが、それはどちらか動作しませんでした。

これは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は状態を変更するために何もしないので、ステートフルなコンポーネントではないはずです...その理由は何もない状態に受け取るプロップを設定するだけです。 React状態では、小道具を使用して渡され、新しい小道具値で更新する必要のあるコンポーネントでレンダリングが開始されます。そのコードのようなものをする必要があるコンポーネントが既にDOMに貼付されているので、何もあなたのコード内で起こっていないが、your'reは、この

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

で新しい値でDOMにそれをreaffixしようとしていますユーザーがログインしているかどうかを評価するステートフル・リアクション・コンポーネント内状態は、反応コンポーネント内で突然変異していなければなりません。以下のコードでは、あなたの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>