Question

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

MainVC

{ "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.name是可访问的。但是props.data.id 和props.data.coord.lon未定义。请问，我对使用API数据集的理解有什么问题？

组件

props.data.weather.map(---)

获取数据并发送动作的Saga。将数据提供给Redux商店。

export const DayItem = (props) => {
  return (<MuiThemeProvider>
                <Paper zDepth={2}>
                {props.data.coord.lon} // No way!
                {props.data.name} // OK!
                </Paper>
              </MuiThemeProvider>)}

mapStateToProps

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
  });
}

dataReducer

function mapStateToProps(state) {
  return {
    chips: state.chipsReducer,
    data: state.dataReducer
  }
};

Answer 1

最终，我明白了。问题在于React渲染与数据加载的速度差异。加载总是在渲染后面。因此，完整的数据集不存在。

只是条件渲染让我的一天成为{this.state.isLoading ? <div>Loading</div> : <DayItem {...this.props}/>}

Answer 2

你必须使用MapStateToProps，然后使用componentWillReceiveProps（nextProps）

像这样的东西

function mapStateToProps(state) {


    return {

      data:state.toJS().yourReducer.data,

    }

然后再做下一步：

componentWillReceiveProps(nextProps) {
if (nextProps.data) {
      if (nextProps.data.coord.lon != undefined) {
        this.setState({yourData:nextProps.data.coord.lon}
      }
}

React / Redux和API数据对象

2 个答案: