类型错误：this.props.weather 未定义

Posted 2023-02-22

【中文标题】类型错误：this.props.weather 未定义

【英文标题】：TypeError: this.props.weather is undefined

【发布时间】：2019-04-07 08:31:18

【问题描述】：

我正在开发一个应用程序，该应用程序将帮助我使用 openweathermap.org 获取任何城市的五天天气预报，但是，每当我在 WeatherList 容器中调用函数 renderWeather 时，我都会在浏览器中收到上述错误，如图所示在我下面的代码 sn-ps 中。

这个文件是我导入 redux promise 的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';
import ReduxPromise from 'redux-promise';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store=createStoreWithMiddleware(reducers)>
    <App />
  </Provider>
  , document.querySelector('.container'));

weather_list 容器的代码如下

import React, Component from 'react';
import connect from 'react-redux';

class WeatherList extends Component

renderWeather(cityData)
  return(
    <tr>
      <td>cityData.city.name</td>
    </tr>
  );



  render()
    return(
      <table className="table table-hover">
        <thead>
          <tr>
          <th>City</th>
          <th>Temperature</th>
          <th>Pressure</th>
          <th>Humidity</th>
          </tr>
        </thead>
        <tbody>
        this.props.weather.map(this.renderWeather)
        </tbody>
      </table>
    );
  

function mapStateToProps(state)
  return 
    weather: state.weather
  ;

export default connect(mapStateToProps)(WeatherList);

search_bar 容器的代码如下

import React, Componentfrom 'react';
import connect from 'react-redux';
import bindActionCreators from 'redux';
import fetchWeather from '../actions/index';

class SearchBar extends Component
  constructor(props)
    super(props);

    this.state = term: '';
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  

onInputChange(event)
  console.log(event.target.value);
  this.setState(term: event.target.value);


onFormSubmit(event)
  event.preventDefault();
  // we need to go and fetch weather data!
  this.props.fetchWeather(this.state.term);
  this.setState(term: '');


  render()
    return(
      <form onSubmit=this.onFormSubmit className="input-group">
        <input
          placeholder="Get a five-day forecast in your favorite cities"
          className="form-control"
          value=this.state.term
          onChange=this.onInputChange />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Submit</button>
        </span>
      </form>
    );
  

function mapDispatchToProps(dispatch)
  return bindActionCreators(fetchWeather:fetchWeather, dispatch)


export default connect(null, mapDispatchToProps)(SearchBar);

应用组件的代码如下所示

import React,  Component  from 'react';
import SearchBar from '../containers/search_bar.js';
import WeatherList from '../containers/weather_list.js';


export default class App extends Component 
  render() 
    return (
      <div>
        <SearchBar />
        <WeatherList />
      </div>
    );
  

天气减速器的代码如下所示

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

export default function(state = [], action)
  switch (action.type) 
    case FETCH_WEATHER:
      //return state.concat([action.payload.data]);
      return ([action.payload.data, ...state])
  
  return state;

reducers 文件夹中 index.js 的代码如下所示

import  combineReducers  from 'redux';
import WeatherReducer from './reducer_weather';

const rootReducer = combineReducers(
  weather: WeatherReducer
);

export default rootReducer;

actions文件夹中的action creator的代码如下所示

import axios from 'axios';
const API_KEY = '03d17752ca362bc60ca7df94aac228a6';
const ROOT_URL =`https://api.openweathermap.org/data/2.5/forecast?appid=$API_KEY`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city)
  const url = `$ROOT_URL&q=$city,us`;
  const request = axios.get(url);

  console.log('Request:', request);

  return
    type: FETCH_WEATHER,
    payload: request
  

最后，下面是显示浏览器错误的图像。 enter image description here

非常感谢有关如何解决错误的任何帮助

【问题讨论】：

在 WeatherList 中，您可以尝试 this.props.weater && this.props.weather.map(.. 您的代码，当您有 undefined 变量时，这不会导致执行代码

【参考方案1】：

最初 this.props.weather 将是未定义的，因此您需要在执行 .map 之前通过两种方式进行条件检查

this.props.weather && this.props.weather.map

或

Array.isArray(this.props.weather) && this.props.weather.map

此外，在执行 .map 时，您需要将天气数据传递给 renderWeather 方法，因为它需要数据，但您没有在 .map 中将数据传递给它

改变

this.props.weather.map(this.renderWeather)

到

 Array.isArray(this.props.weather) && this.props.weather.map(item => this.renderWeather(item))

这里也为tr元素设置唯一键

renderWeather(cityData)
  return(
    <tr key=cityData.city && cityData.city.id> //if you do not have unique id then use index as key
      <td>cityData.city && cityData.city.name</td>
    </tr>
  ); 

或者如果您的数据不包含唯一 ID，则使用索引作为键

 Array.isArray(this.props.weather) && this.props.weather.map((item, index) => this.renderWeather(item, index))

这里也为tr元素设置唯一键

renderWeather(cityData, index)
  return(
    <tr key="city-"+index> //if you do not have unique id then use index as key
      <td>cityData.city && cityData.city.name</td>
    </tr>
  ); 

【参考方案2】：

这是因为this.props.weather 是undefined，因此在undefined 上调用.map() 函数会抛出错误。您可以提前添加验证，以确保它仅在为数组时（数据传入时）调用.map()。

您可以添加：

Array.isArray(this.props.weather) && ...

在此处进行更改：

import React, Component from 'react';
import connect from 'react-redux';

class WeatherList extends Component

renderWeather(cityData)
  return(
    <tr>
      <td>cityData.city.name</td>
    </tr>
  );



  render()
    return(
      <table className="table table-hover">
        <thead>
          <tr>
          <th>City</th>
          <th>Temperature</th>
          <th>Pressure</th>
          <th>Humidity</th>
          </tr>
        </thead>
        <tbody>
        Array.isArray(this.props.weather) && this.props.weather.map(this.renderWeather)
        </tbody>
      </table>
    );
  

function mapStateToProps(state)
  return 
    weather: state.weather
  ;

export default connect(mapStateToProps)(WeatherList);