存储状态更改时，React组件未更新 [英] React component not updating when store state has changed

问题描述

下面是我的组件类.该组件似乎从未执行componentWillUpdate()，即使我在mapStateToProps返回之前可以通过记录看到状态正在更新.状态正在100％更改，但是组件不会刷新.

Below is my component class. The component never seems to execute componentWillUpdate(), even when I can see the state updating by logging before the return in mapStateToProps. The state is 100% changing, however the component doesn't refresh.

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
  }
}

经过更多测试和记录后，似乎将状态映射到props时，它用于映射到props的状态对象包含正确的数据，因此state.map.data是正确的，我可以看到从拿来.但是，当我将this.props记录在componentWillUpdate()中时，数据对象在那里，但为空.

After some more testing and logging it seems that when it goes to map state to props the state object it uses to map to props contains the correct data, so state.map.data is correct and I can see the return from the fetch. However when I then log this.props in componentWillUpdate(), the data object is there but empty.

推荐答案

我遇到了类似的问题，并且在阅读以下内容后找到了答案:

I had a similar problem and I found out the answer after read this:

数据通过reducer中的处理操作结果在存储中进行设置/更新/删除. Reducer会收到您应用程序切片的当前状态，并希望重新获得新状态.可能不会重新渲染组件的最常见原因之一是，您正在修改化简器中的现有状态，而不是返回具有必要更改的新状态副本(请参阅疑难解答"部分).当您直接更改现有状态时，Redux不会检测到状态差异，也不会通知您的组件存储已更改. 因此，我绝对会检查您的化合器，并确保您不会改变现有状态.希望对您有所帮助！ ( https://github.com/reactjs/redux/issues/585 )

Data gets set/updated/deleted in the store via the results of handling actions in reducers. Reducers receive the current state of a slice of your app, and expect to get new state back. One of the most common reasons that your components might not be re-rendering is that you're modifying the existing state in your reducer instead of returning a new copy of state with the necessary changes (check out the Troubleshooting section). When you mutate the existing state directly, Redux doesn't detect a difference in state and won't notify your components that the store has changed. So I'd definitely check out your reducers and make sure you're not mutating existing state. Hope that helps! (https://github.com/reactjs/redux/issues/585)

当我尝试将Object.assign({}, object)用作您时，它还是无法正常工作.当我发现此内容时也是如此:

When I tried use Object.assign({}, object) as you, it didn't work anyway. So was when I found this:

Object.assign仅制作浅表副本. ( https://scotch.io/bar-talk/copying-objects-in -javascript )

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

Then I understood that I had to do this: JSON.parse(JSON.stringify(object))

或仅此: {...object}

对于数组: [...theArray]

我希望这会对您有所帮助

I hope that this will help you

这篇关于存储状态更改时，React组件未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！