я могу видеть реквизиты, поступающие от действия (избыточность) в журналах консоли, но не могу получить доступ к окну.Giving TypeError: Невозможно прочитать подпорку 'rest' из неопределенного

Question

Итак, я новичок во всем, что касается реакции и редукции, и после нескольких речей и блогов я пытаюсь создать приложение реагировать на редукцию.Я нажимаю API для получения некоторых данных.

редуктор выглядит так:

const initialState ={
rest: null,
rests: null,
loading: false
}

export default function(state = initialState, action){
switch (action.type){
    case REST_LOADING:
    return{
        ...state,
        loading: true
    }
    case GET_REST:
    return {
        ...state,
        rest: action.payload,
        loading: false
    }

Действие:

export const getCurrentRest = name => 
dispatch(setRestLoading());
axios.get(`/api/restaurant/rest/${name}`)
    .then(res =>
        dispatch({
            type: GET_REST,
            payload: res.data
        })
    )
    .catch(err =>
        dispatch({
            type: GET_REST,
            payload: {}
        })
    );
}

Теперь я вызываю это действие настраница примерно такая:

class CafeMenu extends Component {
name = this.props.match.params.id;

constructor(props) {
    super(props);

}
componentDidMount() {

   this.props.getCurrentRest(this.name);
}

в части рендеринга, я произвел некоторую деструктуризацию.первоначально:

const {rest, loading} = this.props.rest;

позже я изменил его на

const {rest} = this.porps.rest;

, теперь я могу видеть данные в журналах консоли и изменения состояния в расширении redux devtools, но когда я пытаюсь получить к нему доступ черезrest.name или this.rest.rest.name без деструктуризации выдает typeError, скажем, не может прочитать свойство 'rest' из undefined.Я попробовал все, но не мог понять, что я сделал неправильно и как решить эту проблему дальше, и застрял в этом.

Первоначально я также сделал что-то вроде:

 if(rest === undefined || null){
<h1> loading</h1>
}
else{
reder...

и консоль.журнал this.props.rest is

{rest: Array(1), rests:null, loading: false}
loading: false
rest: Array(1)
0:
 email: "something@abc.com"
 loc: {long: "23.34", lat: "43"}
 loc_name: "abc"
 menu: []
 name: "xyz"
 ...

Answer 1

Похоже, вы неправильно уничтожаете свои реквизиты.

Также здесь есть опечатка porps вместо реквизита .

const {rest} = this.porps.rest;

Это может быть причиной, по которой он выдает typeError.

Теперь для уничтожения детали.Предполагая, что это ваша структура реквизита

{rest: Array(1), rests:null, loading: false}

loading: false
rest: Array(1)
    0:
        email: "something@abc.com"
        loc: {long: "23.34", lat: "43"}
        loc_name: "abc"
        menu: []
        name: "xyz"
rests: null

Вот доступ через деструкцию:

const { loading, rest, rests } = this.props

Значения будут

loading = false
rest = Array(1)
       0:
          email: "something@abc.com"
          loc: {long: "23.34", lat: "43"}
          loc_name: "abc"
          menu: []
          name: "xyz"
rests = null

Теперь, когда rest являетсямассив, чтобы получить доступ к первому названию ресторана, rest[0].name должно дать вам "xyz".

Дайте мне знать, если это поможет.