Question

我想知道在反应生命周期中我应该在哪里获取数据。我尝试将数据放入componentDidMount()和componenWillMount() 但没有成功......

componentWillMount(){

 // this fetch the data from back-end set a store state with the payload
        this.props.fetchUser(); 
        this.setState({userData:this.props.auth});
}

//fetchMethod
export const fetchUser = () => async dispatch =>{//using redux-thunk


    const res= await axios.get('/api/current_user')

    dispatch({type:FETCH_USER, payload:res.data}); 



};

在我的渲染函数中，我尝试通过调用this.state.userData来使用获取的userData。但它没有定义。我也尝试通过调用正确的存储状态来获取它，也没有成功。根据我的本地存储，我不能得到的是存储状态的定义。希望有人可以告诉我我做错了什么。谢谢！

Answer 1

您可以在componentWillMount或componentDidMount生命周期方法中进行提取（需要注意的是，当您拥有服务器呈现的应用程序时，如果您在服务器中呈现请求，则会出现同步服务器呈现的html和重新水合的html的问题。 componentWillMount。）

您的this.state.userData未定义的原因是因为对您的数据的调用本质上是异步的。我建议为组件添加功能，以检查是否正在进行api调用（可能是isLoading？），如果已完成（或许isLoaded）。

在实施方面，假设您使用connect react-redux更高阶的组件，它将会是这样的：

class YourComponent extends React.Component {

  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    const { isLoading, isLoaded, data } = this.props;
    if (isLoading) return <Loader />; // Or whatever you want to return when it is loading
    if (!isLoaded || !data) return null; // If it is not loading and its not loaded, then return nothing.
    return (
      <div>
        <h1>{data.name}</h1>
        <h2>{data.id}</h2>
      </div>
    )
  }

}

const mapStateToProps = state => ({
  isLoading: state.user.isLoading,
  isLoaded: state.user.isLoaded,
  userData: state.user.data
});

export default connect(mapStateToProps, { fetchUser })(YourComponent);

在您的操作调度程序/中间件中，您需要考虑异步调用的开始。假设使用像redux thunk这样的东西......

const initialState = {
  isLoaded: false,
  isLoading: false,
  data: {},
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_USER:
      return {
        ...state,
        isLoading: true,
      }
    case FETCH_USER_SUCCESS:
      return {
        isLoading: false,
        isLoaded: true,
        data: action.payload
      };
    default:
      return state;
  }
};

export default reducer;

在进行反应之前获取数据的最佳位置

1 个答案: