Question

class ViewExchange extends React.Component{ 
  state={list:[],refresh:false}
  componentWillMount(props){

    if(_.isEmpty(Cookies.get())){
     this.props.history.push("/signup")
    }
    else{
      console.log("is present")
    let platform = Cookies.get('platform')
    console.log(platform)
    axios.post('http://localhost:3001/user/viewexchange',{platform})
    .then(res=>{
      console.log(res.data)
      this.setState({list:res.data})})
    
    console.log(this.state.list)
    }
  }


 render(){
      return (
        <div>
          <button onClick={()=>this.setState({refresh:true})}>refresh</button>
          {console.log(this.state.refresh)}
        </div>
    );
      }
}
export default withRouter(ViewExchange);

Answer 1

setState状态更新操作是异步的，因此更新状态将花费一些时间。但是您的日志会在更新之前执行。相反，您可以将传递函数用作setState中的第二个参数：

this.setState({list:res.data}, () => console.log(this.state.list))

另一种方法是：

this.setState(state => {
     state.list = res.data
}, () => console.log(this.state.list))

Answer 2

尽管Jai的答案是正确的，但我也不相信您在正确初始化状态。

在使用类组件时，必须在类的构造函数中初始化状态。

constructor(props) {
   super(props);
   this.state = { 
     list: [],
     refreshing: false,
   };

}

状态未在componentWillMount中更新

2 个答案: