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

Question

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

初始状态：

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

** cmets 后更新 **

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

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