我可以在控制台日志中看到來自action（redux）的道具，但是無法在窗口上訪問。 提供TypeError：無法讀取未定義的prop'rest'

Question

因此，我對所有的react和redux都是陌生的，並且在經過幾次討論和博客之后，我正在嘗試創建react-redux應用程序。 我正在點擊一個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'未定義。 我嘗試了一切，但無法弄清楚我做錯了什么，以及如何進一步解決並堅持下去。

最初我也做了類似的事情：

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

並且this.props.rest的console.log是

{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" 。

讓我知道是否有幫助。