首页 文章

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

提问于
浏览 次
5

下面是我的组件类 . 该组件似乎永远不会执行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)

这是 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是正确的，我可以看到从fetch返回 . 但是当我在componentWillUpdate（）中记录this.props时，数据对象就在那里但是为空 .

javascript reactjs state redux

2 回答

  • 2

    componentWillUpdate接收传入的道具作为参数 . 这时， this.props 仍然是旧道具 . 尝试更改您的方法，如下所示：

    void componentWillUpdate(nextProps, nextState) {
    L.geoJson(nextProps.data).addTo(this.map);
}
    回复于
  • 7

    我有一个类似的问题，我在阅读后发现了答案：

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

    当我尝试使用 Object.assign({}, object) 时，无论如何它都无法正常工作 . 当我发现这个时：

    Object.assign只生成浅拷贝 . （https://scotch.io/bar-talk/copying-objects-in-javascript）

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

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

    我希望这会对你有所帮助

    回复于

相关问题