为什么我创建了几次我的Component，总共只挂载一次（componentDidMount）？

Question

简要说明

我有一个简单的天气应用程序用react / redux制作，每个行渲染一个包含3个图表和谷歌地图组件的表格。 问题在于这个谷歌地图组件。它只安装一次，我不明白为什么。

预期行为

当我向天气表添加新城市时，它应该从城市获取新数据并显示与城市的谷歌地图。我之前添加的其他城市也应显示其相应的位置。

实际行为

我添加的第一个城市一切都很好。我看到了地图和图表。 让我们以城市＆＃39; Linz＆＃39;为例。 现在，当我添加第二个城市（第二行），例如萨尔茨堡＆＃39;时，行添加，图表显示正确的数据，但地图与第一个（林茨）相同。我现在可以添加尽可能多的地图，例如，地图总是相同的。 ＆＃39;林茨＆＃39 ;.我也找到了解决方案，但我无法弄清楚问题存在的原因。更多细节要遵循

麻烦制造者组件

以下是呈现所述地图的组件片段（它只是作为道具传递给long和lat）：

export default class GoogleMap extends React.Component {

componentDidMount() {

    const city = {lat: this.props.lat, lng: this.props.long };

    const map = new google.maps.Map(this.refs.map, {
        zoom: 12,
        center: city
    })

}

render() {
return <div className='map' ref={'map'} />

}

}

这里的问题是，每个应用程序使用的组件只会安装一次（无论我多久更新一次地图，例如添加城市）。 如果我将componentDidUpdate()方法添加到地图组件，则应用程序的功能应该如下：

componentDidUpdate() {
    const city = {lat: this.props.lat, lng: this.props.long };

    const map = new google.maps.Map(this.refs.map, {
        zoom: 12,
        center: city
    })
}

有和没有componentDidUpdate（）的屏幕截图

仅使用componentDidMount()：

添加componentDidUpdate()：

问题

为什么？当我创建几个＆＃34;实例＆＃34;为什么它只是挂载一次？这个组件？我像这样调用map组件：

• 首先，我从具有天气数据的redux商店中映射一个数组，每个城市一个，所以它开始是空的

• 对于数组中的每个天气数据，我都会调用此函数：

  renderWeather =（weather，id）=＆gt; {

  const temperatures = weather.list.map((data) => data.main.temp);
  const pressures = weather.list.map((data) => data.main.pressure);
  const humidities = weather.list.map((data) => data.main.humidity);
  let long = weather.city.coord.lon;
  let lat = weather.city.coord.lat;
  
  return (
      <tr key={id} className='row'>
          <td> <GoogleMap long={long} lat={lat} /> </td>
          <td> 
              <Chart color='green' data={temperatures} />
          </td>
          <td> <Chart color='red' data={pressures} /> </td>
          <td> <Chart color='orange' data={humidities} /> </td>
      </tr>
  )
  

  }

所以当我有2个城市（数组长度为2）时，它应该创建2个GoogleMap组件？那么每个组件应该运行componentDidUpdate对吗？但它只做一次吗？能否帮助我理解为什么它不像我预期的那样工作？

Answer 1

由于它正在使用componentDidUpdate，我猜测有一些api调用{long，lat}数据，这是在组件安装后解析的。

修改

更改WeatherRedux/src/actions/index.js

export function fetchWeather(city) {

    const url = `${BASE_URL}&q=${city}, AT`;

    const weatherPromise = axios.get(url);

    return {
        type: FETCH_WEATHER,
        payload: weatherPromise
    }
}

这样的事情，

export function fetchWeather(city) {

    const url = `${BASE_URL}&q=${city}, AT`;

    axios.get(url).then(function(data){
      return {
        type: FETCH_WEATHER,
        payload: data
      }
    });
}