лучшее место для извлечения данных перед рендерингом в реакции

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.но это не определеноЯ также попытался получить его, вызвав правильное состояние магазина, также без успеха.Что я не понимаю, так это то, что, согласно местному хранилищу, определено состояние магазина.Надеюсь, кто-нибудь скажет мне, что я сделал неправильно. Спасибо!

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

В вашем диспетчере действий / промежуточном программном обеспечении вам понадобитсядля учета начала асинхронного вызова.Предполагая, что это объясняется чем-то вроде избыточного толка ...

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;