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，说无法读取属性'其余”未定义。我尝试了一切，但不知道自己做错了什么，以及如何进一步解决并坚持下去。

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

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

，此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

您似乎没有正确破坏道具。

这里还有猪而不是 props 的错字。

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"的第一个餐厅名称。

让我知道这是否有帮助。

我可以在控制台日志中看到来自action（redux）的道具，但是无法在窗口上访问。提供TypeError：无法读取未定义的道具“ rest”

1 个答案: