首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React/Redux和API数据对象

React/Redux和API数据对象
EN

Stack Overflow用户
提问于 2017-12-14 18:55:47
回答 0查看 139关注 0票数 0

我的应用程序成功地获取了API数据并将其放入Redux状态树。

代码语言:javascript
运行
复制
{  
   "coord":{  
      "lon":-0.13,
      "lat":51.51
   },
   "weather":[  
      {  
         "id":311,
         "main":"Drizzle",
         "description":"drizzle rain",
         "icon":"09d"
      },
      {  
         "id":501,
         "main":"Rain",
         "description":"moderate rain",
         "icon":"10d"
      }
   ],
   //-------- 
    //-------- 
    "id":2643741,
   "name":"London",
   "cod":200
}

Props.data已被传递给组件,但实际上我只能访问first key。例如,props.data.nameprops.data.id是可访问的。但是props.data.coord.lonprops.data.weather.map(---)是未定义的。请问,我对使用API数据集的理解有什么问题?

组件

代码语言:javascript
运行
复制
export const DayItem = (props) => {
  return (<MuiThemeProvider>
                <Paper zDepth={2}>
                {props.data.coord.lon} // No way!
                {props.data.name} // OK!
                </Paper>
              </MuiThemeProvider>)}

获取数据并发送操作的Saga。将数据放入Redux存储。

代码语言:javascript
运行
复制
function* getPosition() {
  const getCurrentPosition = () => new Promise(
    (res, rej) => navigator.geolocation.getCurrentPosition(res, rej))

  // Gets user's current position assigned to const
  const pos = yield call(getCurrentPosition);
  const {latitude, longitude} = pos.coords;

  // Yields the forecast API by user coordinates
  const data = yield call(getForecastByCoords, latitude, longitude)

  // Yields user's local forecast to the reducer
  yield put({
    type: LOAD_DATA_SUCCESS,
    data
  });
}

和mapStateToProps

代码语言:javascript
运行
复制
function mapStateToProps(state) {
  return {
    chips: state.chipsReducer,
    data: state.dataReducer
  }
};

dataReducer

代码语言:javascript
运行
复制
export const dataReducer = (state = {}, action) => {
  switch (action.type) {
    case LOAD_DATA_SUCCESS:
      return action.data;
    default:
      return state;
  }
};
EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47811612

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档