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);

我尝试用上述方法记录道具，它确实更新了状态，将空白对象添加到列表中，因此道具被更改了吗？为什么React没有回应？是因为状态是数组吗？

Answer 1

状态引用未更改。它保持不变。 Redux进行浅层比较以决定是否更新状态。

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

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);

更新道具（对象列表）后不渲染

3 个答案: