当商店状态发生变化时，React组件不会更新

以下是我的组件类。组件似乎永远不会执行componentWillUpdate（），即使我可以通过在mapStateToProps中的返回之前记录来查看状态更新。状态是100％更改，但组件不刷新。当商店状态发生变化时，React组件不会更新

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时，数据对象在那里但是为空。

来源

2016-03-10 Jacob Mason

你能告诉你的减速为好？这可能是因为你改变了状态而不是发送新的对象，所以Redux认为没有理由更新。 – Mijamo

没有什么'render'：'

' –

@DavinTryon我正在使用Leaflet来处理它自己的渲染，但是它仍然应该像更新组件一样。 –

componentWillUpdate收到传入的道具作为参数。这时候，this.props依然是老道具。尝试改变你的方法是这样的：

void componentWillUpdate(nextProps, nextState) { 
    L.geoJson(nextProps.data).addTo(this.map); 
}

来源

2016-03-10 14:19:21 Brandon

嗨布兰登，谢谢你的回应。该函数似乎仍然不被调用。在我的三个操作中，请求，接收和获取，我已经登录到控制台，并且似乎一切正常。我还在减速机上做了一些记录，状态肯定会改变。 –

您需要显示您的操作代码和调度这些操作的代码。 – Brandon

嗨布兰登，刚刚发现了一些奇怪的东西，可能有所帮助。检查问题的额外细节。 –

你好，我很新手为react-redux。当我试图修改存储状态时，render方法没有被调用。

1）最初，当我加载页面从API我取出结果集，并存储状态如下：：

store.views = { 
    a: 10,b: 20, c: 30 
    d: { 
    e: [{ 
     f: 'temp', 
     g: 'temp' 
    }, { 
     f: 'temp1', 
     g: 'temp1' 
    }], 
    page: 1, 
    page_count: 3, 
    total_count: 25, 
    has_next: true 
    } 
}

2）搜索关键字“ABC”通过调用流为同下面给出的API将更新存储状态，只有在以前的状态如下更新键“d”：

store.views = { 
    a: 10, b: 20, c: 30 
    d: { 
    e: [{ 
     f: 'temp2', 
     g: 'temp2' 
    }, { 
     f: 'temp3', 
     g: 'temp3' 
    }], 
    page: 1, 
    page_count: 2, 
    total_count: 12, 
    has_next: true 
    } 
}

渲染（）方法调用，页面重新加载成功。

store.views = { 
    a: 10, b: 20, c: 30 
    d: { 
    e: [{ 
     f: 'temp4', 
     g: 'temp4' 
    }, { 
     f: 'temp5', 
     g: 'temp5' 
    }], 
    page: 1, 
    page_count: 1, 
    total_count: 8, 
    has_next: true 
    } 
}

render（）方法不：

3）通过调用相同的API如上将更新存储状态，只有如下更新先前的状态键“d”搜索其他关键字“DEF”调用并没有得到适当的结果集页面上。

来源

2017-07-19 09:05:59 subodh2508

你永远不应该在SO回答疑问，只发布相关答案 –

如果你有一个新问题，请点击[Ask Question]（问问题）（https://stackoverflow.com/questions/ask）按钮。如果有助于提供上下文，请包含此问题的链接。 - [来自评论]（/ review/low-quality-posts/16758430） – Bugs

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

数据获取设置/更新/经处理的减速动作，结果在店里删除。 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}

我希望这将有助于你

来源

2018-03-02 02:12:27 Marina

当商店状态发生变化时，React组件不会更新

回答

相关问题