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不应该是一个有状态的组件，因为它没有改变状态......它只是设置一个它无条件接收到它的状态的prop。在React状态下传递道具，并在需要使用新prop值更新的组件上触发渲染。您的代码中没有任何内容发生，因为该组件已经附加到DOM，但是您尝试使用此新值重新将其重新绑定到DOM

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

类似代码的东西需要在有状态的反应组件中，以评估用户是否登录。状态必须在反应组件中突变而不是在外面试图传递它。在下面的代码中我没有改变你的Login是无国籍的，但它仍然有效，因为我已经静音React组件中的值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

React州/道具不会更新

1 个答案: