时间戳

首页 > 解决方案 > 对象为空时如何阻止useSelector触发？

javascript - 对象为空时如何阻止useSelector触发？

问题描述

我正在制作一个包含嵌套对象的简单 Web 应用程序，我注意到当我删除包含部分对象的成员对象时，我收到一个错误，因为 useSelectors 正在寻找成员。

我的问题是如何制作一个动态的 useSelector，当它正在寻找的对象或其嵌套的对象为空或对象被删除时，它将停止触发。

    const selectedTool = useSelector(state => state.dashboard.selectedTool)
    const i = parseFloat(selectedTool)
    const members = useSelector(state => state.dashboard.sheets[i].members)
    const selectedMember = useSelector(state => state.dashboard.selectedMember)
    const sections = useSelector(state => state.dashboard.sheets[i].members[selectedMember].sections)

这就是成员对象以及嵌套部分对象的样子。

members: {
          0: {
              memberId: '',
              materialId: '',
              sectionId: '',
              totalLengthOfMember: '',
              yAxisUnbracedLength: '',
              yAxisEffectiveLengthFactor: '',
              zAxisUnbracedLength: '',
              zAxisEffectiveLengthFactor: '',
              unbracedLengthLateralTorsional: '',
              lateralTorsionalModificationFactor: '',
              slendernessRatioInCompression: '',
              slendernessRatioInTension: '',
              sections: {
                  0: {
                      sectionId: '',
                      sectionShape: '',
                      sectionName: '',
                      sectionView: '',
                      sectionEdit: ''
                  }
              }
          }
        },

我的目标是允许用户删除成员对象。但是，当用户这样做时，useSelector 部分会给出错误，因为它找不到成员索引。

我该如何解决？感谢你们！

标签： javascriptreactjsreduxreact-redux

解决方案

解决方案很简单，如果没有成员，请不要渲染使用该选择器的组件。

您的回复很可能是，“但所有这些useSelector都在同一个组件中”

我将回答：

您的组件太大，只需制作更小的、单一职责的组件，然后将useSelector's 拆分。

发布您的组件代码。

推荐阅读