访问作为对象的 reducer 有效负载的元素

Posted 2023-02-22

【中文标题】访问作为对象的 reducer 有效负载的元素

【英文标题】：Accessing elements of reducer payload that is an object

【发布时间】：2018-06-11 04:04:29

【问题描述】：

这是一个基本的天气应用程序，我正在做它来学习 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);

this.props.weather.data.map 抛出“无法读取未定义的属性映射”的错误。

提供“天气”状态的reducer是：

import  FETCH_WEATHER  from "../actions/index";

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

最后是相关的动作创建者：

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默认为数组？不确定是否是导致问题的原因，但可能值得一试

【参考方案1】：

由于 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 值，因此this.props.weather.data 将是undefined。在这种情况下要遵循的另一件事是有条件地使用在特定时间点可能未定义的所有此类值

【讨论】：

嘿舒巴姆，谢谢你。您的回答以及上面 Vinz243 的评论已经解决了我在这里遇到的具体问题。它仍然没有呈现城市名称，但我相信我需要编写一个函数来处理它，因为这里的 state 不仅仅是一个数组，所以我不能简单地 .map() 。正如你所说，我重写了我的减速器，但我还必须执行 WeatherReducer(state = initialState, action) 才能使其工作。