javascript - Prop (对象列表)更新后 react 不渲染

Question

我在 redux 中有状态(对象列表)，我有一个将空白对象添加到列表的操作。但是每当我发送 Action 时，React 都不会响应更改的 Prop 。我尝试在 componentDidUpdate 中登录控制台，shouldComponentUpdate 它不会记录更改的 Prop 。

这是 Action

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

这是 reducer

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

这是 redux props 映射器

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

export default connect(mapStateToProps)(AComponent);

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

Answer 1

状态引用它没有改变。它保持不变。Redux 通过浅比较来决定是否更新状态。

reducer 中的状态更新应该是这样的。

case 'ADD_BLANK_OBJECT':

      return [
        ...state.listOfObject,action.newBlankObject
      ]

请查找more here