Redux状态单项更新显示以前的版本

Question

我的数组中的项目（icdCode）的更新reducer（icdCode）在react组件中没有正确更新（直到我重新加载整个组件）。首先它给出了重复键问题，因为在触发操作后，数组中新更新的项目与我的列表组件中的前一个状态项一起显示。我想通过一些调整来解决这个问题，但无论我尝试了什么，我都无法在前端正确更新这个项目。

初始状态：

state = {icdCodes: []}

更新减速器：

case UPDATE_ICD_CODE:
return {
        ...state,
        icdCodes: [...state.icdCodes, action.payload]
}

这是我的react组件的摘录，加载了这些数组项的列表（通过映射）：

  render() {
    const { icdCodes } = this.props.icdCode;

    return (
      <Card body>
        <ListGroup flush>
              <Row>
                this.icdCodes.map(({ _id, icdCode, icdCodeValue }) => (
                <div>{icdCodeValue}</div>
                )
              </Row>
        </ListGroup>
      </Card>
    );
  }
}

IcdCodeItem.propTypes = {
  getIcdCodes: PropTypes.func.isRequired,
  icdCode: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  icdCode: state.icdCode
});

export default connect(
  mapStateToProps,
  { getIcdCodes, deleteIcdCode, updateIcdCode }
)(IcdCodeItem);

以下是action.payload返回的内容（更新的icdCode项目带有新值代替“icdCode”部分）：

{icdCodeVersion: "10", 
_id: "5b922fbae1c4241b54ea8aa4", 
icdCode: "I9", 
icdCodeValue: "jam jam", 
date: "2018-09-07T07:58:50.104Z", …}

以下代码仅部分解决了这个问题（允许我只编辑我的对象的第一个键（不是icdCode项，而是项目中的icdCode - 为可怕的语法道歉）而不是整个对象）：

return {
        ...state,
        icdCodes: state.icdCodes.map(
          icdCode =>
            icdCode._id === action.payload._id
              ? { ...icdCode, icdCode: action.payload.icdCode }
              : icdCode
        )
      };

Answer 1

你可以映射icdCodes数组，然后如果元素是正确的（这里我通过_id检查）然后你可以改变它而不变异。

case UPDATE_ICD_CODE: {
  const icdCodes = state.icdCodes.map(icd => {
    if (icd._id === action.payload._id) {
      return { ...icd, icdCode: action.payload.icdCode };
    }
    return icd;
  });

  return { ...state, icdCodes };
}

**评论后更新**

如果您需要在此更改多个属性，则为：

case UPDATE_ICD_CODE: {
  const { _id, icdCode, icdCodeValue } = action.payload;
  const icdCodes = state.icdCodes.map(icd => {
    if (icd._id === _id) {
      return { ...icd, icdCode, icdCodeValue };
    }
    return icd;
  });

  return { ...state, icdCodes };
}

如果您想完全更改对象，则更容易：

case UPDATE_ICD_CODE: {
    const { _id } = action.payload;
    const icdCodes = state.icdCodes.map(icd =>
        icd._id === _id ? action.payload : icd
    )

    return { ...state, icdCodes };
}