更新 props(对象列表)后 React 不渲染

Question

我在redux(对象列表(中有状态，并且我有一个将空白对象添加到列表中的操作。但是每当我调度动作时，React 都不会响应更改的道具。我尝试在componentDidUpdate中记录控制台，shouldComponentUpdate它不会记录更改的道具。

这是行动

function addNewBlankObject() {
const newBlankObject= {
field1: "",
field2: ""
}
return {type:'ADD_BLANK_OBJECT', newBlankObject: newBlankObject}
}

这是减速机

case 'ADD_BLANK_OBJECT':
var listOfObject = state.listOfObject;
listOfObject.push(action.newBlankObject);
return state;

这是 Redux 道具映射器

function mapStateToProps(state) {
console.log(state.listOfObject); //check if state updated
const listOfObject = state.listOfObject;
return {
listOfObject,
}
}
export default connect(mapStateToProps)(AComponent);

我尝试在上面的方法中记录 props，它确实更新了状态，列表中添加一个空白对象，因此 props 被更改了对吗？ 为什么 React 没有响应？是因为状态是一个数组吗？

Answer 1

状态引用它没有被更改。它保持不变。 Redux 做浅层比较以决定是否更新状态。

化简器中的状态更新应该是这样的。

case 'ADD_BLANK_OBJECT':
return [
...state.listOfObject,action.newBlankObject
]

请查找more here

Answer 2

在化简器中返回新对象，而不是改变现有对象。

Answer 3

你应该使用componentWillReceiveProps，总是把有更新的redux状态放在组件状态中，并使用componentWillReceiveProps更新状态。

class AComponent extends Component {
constructor(props, context) {
super(props, context);
this.state = {
listOfObject: props.listOfObject
};
}
componentWillReceiveProps(nextProps) {
let state = this.state;
state.listOfObject = nextProps.listOfObject;
this.setState({ state });
}
render() {
return (
<div></div>
);
}
}
function mapStateToProps(state) {
console.log(state.listOfObject); //check if state updated
const listOfObject = state.listOfObject;
return {
listOfObject,
}
}
export default connect(mapStateToProps)(AComponent);