我有一个从data
方法获取mapStateToProps()
的组件。组件的代码是:
handleClick = () => {
if (this.props.data.status) {
this.props.changeIpStatus(index, !this.props.data.status);
} else {
this.props.changeIpStatus(index, !this.props.data.status);
}
}
render() {
if (this.props.data.status) {
this.switchClasses = `switcher blocked`;
this.dotClasses = `dot blocked`;
} else {
this.switchClasses = `switcher`;
this.dotClasses = `dot`;
}
return (
<div className="block">
<div onClick={this.handleClick} className={this.switchClasses}>
<div className={this.dotClasses}></div>
</div>
</div>
)
}
}
我的
Redux
连接看起来像:const mapStateToProps = (state) => ({
data: state.ipTable.data.clicks,
})
const mapDispatchToProps = (dispatch) => {
return {
changeIpStatus: (index, status) => {
return dispatch(changeIpStatus(index, status));
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(BlockSwitcher)
当我单击切换器时,它应该重新呈现,因为数据已更改。我看到数据已通过控制台日志更改。但是它不会调用重新渲染。为什么?我的组件具有mapStateToProps,其中包含更改和操作导入正确(选中)的数据。
更新:
这是我的减速器:
const initialState = {
data: {}
}
const ipReducer = (state = initialState, action) => {
switch (action.type) {
case `SET_CLICKS`:
return {
...state,
data: action.data
}
case `CHANGE_IP_STATUS`:
let newState = Object.assign({}, state);
newState.data.clicks[action.index].status = action.status;
return newState;
default: return state;
}
}
export default ipReducer;
最佳答案
您可以使用JSON.parse(JSON.stringify(...))
方法,但是请注意,如果您的状态包含不可序列化的属性,则会丢失该属性。
这是另一种方法。您可以更频繁地看到此方法。
// map the clicks, if index match return the new one with the new status
// if the index does not match just return the current click
const newClicks = state.data.clicks.map((click, index) => {
if (index !== action.index) return click;
return { ...click, status: action.status };
});
// Here, set your new state with your new clicks without mutating the original one
const newState = { ...state, data: { ...state.data, clicks: newClicks } };
return newState;
第二种选择就是这样。在不映射所有
clicks
的情况下,我们可以将Object.assign
用于clicks
突变。const newClicks = Object.assign([], state.data.clicks, {
[action.index]: { ...state.data.clicks[action.index], status: action.status }
});
const newState = { ...state, data: { ...state.data, clicks: newClicks } };
return newState;
关于javascript - Redux不会重新渲染组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53560285/