Question

我在加载项目时收到警告和错误。我现在正在观看视频68.

警告：

警告：React.createElement：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或a ReactClass（用于复合组件）。检查渲染方法 WeatherList。

错误：

错误：元素类型无效：期望一个字符串（用于内置组件）或类/函数（用于复合组件）但得到：宾语。检查WeatherList的呈现方法。

当我检查WeatherList组件的render方法时，我没有看到任何会导致此错误的内容：

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

他们都指向此渲染方法作为错误的来源。

修改

正在导入WeatherList组件并在App组件中呈现。

import WeatherList from "../containers/weather_list";

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

renderWeather功能通过数组映射返回表数据：

renderWeather(cityData) { 
    const name = cityData.city.name;
    const temps = _.map(
      cityData.list.map(weather => weather.main.temp),
      temp => temp - 273
    ); 
    const pressures = cityData.list.map(weather => weather.main.pressure);
    const humidities = cityData.list.map(weather => weather.main.humidity);
    const { lon, lat } = cityData.city.coord; 
    return (
      <tr key={name}>
        <td>
          <GoogleMap lon={lon} lat={lat} />
        </td>
        <td>
          <Chart data={temps} color={"red"} units="C" />
        </td>
        <td>
          <Chart data={pressures} color={"green"} units="hPa" />
        </td>
        <td>
          <Chart data={humidities} color={"blue"} units="%" />
        </td>
      </tr>
    );
  }

元素类型无效：期望一个字符串（对于内置＆gt;组件）或一个类/函数（对于复合组件）但得到：＆gt;宾语

0 个答案: