Question

所以我对从API中提取的数据有一个奇怪的问题。在我的reducer中，我将初始状态设置为空对象，在我的组件的render方法中，我使用this.props.data.value.one访问这个获取的数据。

来自API的实际获取数据如下所示：

{data:
  {value: {one: '1'}}
}

但是，当我尝试console.log(this.props.data)时，它会在记录{value: {one: '1'}}几次后记录undefined，但会将this.props.data.value.one记录为undefined。

我正在我的其他Reducer中做类似的事情，它们从其他API获取数据并且它们工作正常。

App.js组件：

@connect(store => store)
...
componentWillMount = () => {//API Call here}
render = () => {
 return (
    <div><p>{this.props.data.value.one}</p><div>
 )
}

reducer.js：

...
export default function reducer(state={data: {}}, action) {
  ...
  case 'FETCHED_DATA':
    return {...state, data: action.data}

action.js：

...
fetchData = user => dispatch => {
  //request.get...
     .then(res => dispatch({type: 'FETCHED_DATA', data: res.body.data})
}

Answer 1

由于您将初始状态设置为空对象，并且您获得的数据是通过异步API调用，因此当组件呈现第一次this.props.data未定义时。

您需要做的是在使用之前检查数据是否可用

添加条件检查，如

this.props.data && this.props.data.value.one

Answer 2

由于您已将初始状态定义为数据：{}，而不是数据：{value：＆＃39;＆＃39;}，因此当您从api数据对象获取数据时，不会将其初始化为数据。访问它的价值。将它设置为后者应该有效。

Answer 3

我在这里看到了两个问题：

正如其他答案和评论所述，你应该永远有条件地访问异步提取的对象。
```
this.props.myObj && this.props.myObj.myValue
```
顺便说一下，不要在componentWillMount内取得，而是去做在componentDidMount。你可以在里面了解这个的原因 DOCS。

避免在此方法中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）。
看看你的减速器（state）的形状，似乎是 data对象嵌套在reducer中：
```
state={data: {}} 
```
因此，您无法直接从道具访问它（除非您正在更改 mapStateToProps）中的形状。

所以我希望看到这个：
```
this.props.reducerName.data.value.one
```
而不是：
```
this.props.data.value.one
```

对象中的键是未定义的但对象不是（react-redux）

3 个答案: