Javascript 访问作为对象的减速器有效负载的元素

这是一个基本的天气应用程序，我正在做的学习Redux。API没有提供搜索的城市名称，因此我必须通过Redux传递它

我有以下容器：

import React, { Component } from "react";
import { connect } from "react-redux";

class WeatherList extends Component {
  renderWeather = cityData => {
    const conditions =
      cityData.forecast.simpleforecast.forecastday[0].conditions;
    const fHigh =
      cityData.forecast.simpleforecast.forecastday[0].high.fahrenheit;
    return (
      <tr>
        {/* <td>{cityData.city}</td> */}
        <td>{cityData.meta.city}</td>
        <td>{conditions}</td>
        <td>{fHigh}</td>
      </tr>
    );
  };
  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>City</th>
            <th>Conditions</th>
            <th>High (F)</th>
            <th>Humidity</th>
          </tr>
        </thead>
        {/* <tbody>{this.props.weather.map(this.renderWeather)}</tbody> */}
        <tbody>{this.props.weather.data.map(this.renderWeather)}</tbody>
      </table>
    );
  }
}

const mapStateToProps = ({ weather }) => ({
  weather
});

export default connect(mapStateToProps)(WeatherList);

最后，这里是相关的行动创建者：

import axios from "axios";

const API_KEY = "e95fb12f6c69ae61";
const ROOT_URL = `http://api.wunderground.com/api/${API_KEY}/forecast/q/`;

export const FETCH_WEATHER = "FETCH_WEATHER";

export function fetchWeather(searchData) {
  const url = `${ROOT_URL}${searchData.stateName}/${searchData.city}.json`;
  const request = axios.get(url);

  return {
    type: FETCH_WEATHER,
    payload: request,
    meta: { city: searchData.city }
  };
}

您可以从注释掉的代码中看到，如果我只传递一个数组进行迭代，我就可以让它工作。但我需要传递更多信息才能获得人们搜索的城市名称。如何读取state对象的第一个元素数组，并消除未定义的错误

---

谢谢你的建议

由于WeatherReducer返回具有数据和元属性的对象，因此必须将其声明为initialState中的对象。你的减速机看起来一定像

const initialState = {
    data: [],
    meta: ''
}
export function WeatherReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_WEATHER:
      console.log(action.payload.data);
      console.log(action.meta.city);
      return { data: [action.payload.data, ...state.data], meta: action.meta.city };
  }
  return state;
}

---

该错误可能是因为在触发

fetchWeather

操作之前，最初返回一个空数组作为reducer值，因此

此.props.weather.data

将是

未定义的

。在这种情况下要遵循的另一件事是有条件地使用在某个时间点可以未定义的所有值

为什么

状态

默认为数组？不确定这是否是导致问题的原因，但可能值得查看Hey Shubham，谢谢你。您的回答和上面Vinz243的评论解决了我在这里遇到的具体问题。它仍然没有呈现城市名称，但我相信我需要编写一个函数来处理它，因为这里的state不仅仅是一个数组，所以我不能简单地在它上面使用.map（）。正如您所说，我重新编写了我的reducer，但我还必须执行WeatherReducer（state=initialState，action）才能让它工作。

const initialState = {
    data: [],
    meta: ''
}
export function WeatherReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_WEATHER:
      console.log(action.payload.data);
      console.log(action.meta.city);
      return { data: [action.payload.data, ...state.data], meta: action.meta.city };
  }
  return state;
}