Как правильно попросить реквизит на компонент - PullRequest
Новая
       12

Как правильно попросить реквизит на компонент

1 голос
/ 06 мая 2019

У меня есть компонент SinglePost, который вызывается при нажатии другого компонента Post на главной странице, а также по пути /post/:id. Дело в том, что в SinglePost я вызываю API через Redux на componentDidMount, а затем запрашиваю его на componentWillReceiveProps. И когда вы получаете доступ к компоненту с URL /post/:id, после его загрузки реквизиты выбрасывают неопределенное значение два раза.

Я следовал учебному пособию по React / Redux, чтобы создать веб-приложение CRUD с вызовами API. И в этом проекте реквизит загружается нормально в обоих случаях (с помощью навигации по главной странице и по URL). Я сделал то же самое, и это не работает. Это проблема, или она работает таким образом?

Это компонент SinglePost: 

   import { connect } from 'react-redux';
   import { mostrarPublicacion } from '../../actions/publicacionesActions';

    state = {
        publicacion: {},
    }

    componentDidMount() {
        const {id} = this.props.match.params;
        //this is the action defined on PublicacionesActions
        this.props.mostrarPublicacion(id);

    }

    componentWillReceiveProps(nextProps, nextState) {
        const {publicacion} = nextProps;
        this.setState({
          publicacion
        })

    }

   const mapStateToProps = state => ({
       publicacion: state.publicaciones.publicacion
   })

   export default connect(mapStateToProps, {mostrarPublicacion}) (SinglePost);

PublicacionesActions: 

   export const mostrarPublicacion = (id) => async dispatch => {
     const respuesta = await axios.get(`http://www.someapi.com:8000/api/publicacion/${id}`);
     dispatch({
         type: MOSTRAR_PUBLICACION,
         payload: respuesta.data
     })
}

Я отладил это, и он фактически возвращает публикацию. Фактически, он правильно отображается в компоненте SinglePost. Но сначала он загружается неопределенным при доступе к компоненту через URL.

RootReducer: 

   import { combineReducers } from 'redux';
   import publicacionesReducer from './publicacionesReducer';
   import seccionesReducer from './seccionesReducer';

   export default combineReducers({
       publicaciones: publicacionesReducer, 
       secciones: seccionesReducer

   });

PublicacionesReducer: 

export default function (state = initialState, action) {
    switch(action.type) {
        case MOSTRAR_PUBLICACION:
            return {
                ...state,
                publicacion: action.payload
            }
        default:
            return state
    }
}

Это компонент Router (обернутый в <Provider store={store}>): 

<Switch>
   <Route exact path='/post/:id' component={SinglePost} />
</Switch>

Я фактически запрашиваю (!this.state.publication) и возвращаю ноль, чтобы отобразить компонент. Это работает, но это необходимо?

...