当存储状态更改时，React 组件不会更新

下面是我的组件类。该组件似乎永远不会执行 componentWillUpdate()，即使我可以在 mapStateToProps 返回之前通过日志记录看到状态更新。状态 100% 发生变化，但组件不刷新。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { search } from './mapActions'
import L from 'leaflet'


class Map extends Component {
  componentDidMount() {
    L.Icon.Default.imagePath = './images'
    this.map = new L.Map('map', {
      center: new L.LatLng(this.props.lat, this.props.lng),
      zoom: this.props.zoom,
      layers: L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '<a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      })
    })
  }
  componentWillUpdate() {
    console.log('UPDATE MAP')
    L.geoJson(this.props.data).addTo(this.map)
  }
  render() {
    return <div id="map"></div>
  }
}

const mapStateToProps = (state) => {
  return {
    isFetching: state.isFetching,
    data: state.data
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    search: (name) => {
      dispatch(search(name))
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Map)

这是地图缩减器：

const initialState = {
  isFetching: false,
  data: {}
}

export const map = (state = initialState, action) => {
  switch(action.type) {
    case 'REQUEST_SEARCH_RESULTS':
      return Object.assign({}, state, {
        isFetching: true
      })
    case 'RECEIVE_SEARCH_RESULTS':
      return Object.assign({}, state, {
        isFetching: false,
        data: action.data
      })
    default:
      return state
  }
}

经过更多测试和日志记录后，似乎当它转到映射状态来支持状态对象时，它用于映射到属性的状态对象包含正确的数据，因此 state.map.data 是正确的，我可以看到获取的返回结果。然而，当我在 componentWillUpdate() 中记录 this.props 时，数据对象在那里但为空。

我遇到了类似的问题，读完后我找到了答案：

数据通过减速器中处理操作的结果在存储中设置/更新/删除。减速器接收应用程序切片的当前状态，并期望返回新状态。组件可能无法重新渲染的最常见原因之一是您正在修改减速器中的现有状态，而不是返回包含必要更改的新状态副本（请查看故障排除部分）。当您直接改变现有状态时，Redux 不会检测到状态差异，也不会通知您的组件存储已更改。 所以我肯定会检查你的减速器并确保你不会改变现有状态。希望有帮助！ (https://github.com/reactjs/redux/issues/585 https://github.com/reactjs/redux/issues/585)

当我尝试使用时Object.assign({}, object)和你一样，反正没用。当我发现这个时也是如此：

Object.assign 只进行浅拷贝。 (https://scotch.io/bar-talk/copying-objects-in-javascript https://scotch.io/bar-talk/copying-objects-in-javascript)

然后我明白我必须这样做：JSON.parse(JSON.stringify(object))

或者只是这样：{...object}

对于数组：[...theArray]

我希望这能帮助你