在对象内的数组将项目推送到它之后，反应组件不重新渲染

Question

我有一个上下文对象，该对象包含我应用程序特定部分所需的所有信息。该对象包含一些数组。

数据

{
   groupname: 'a',
   members: {
     regular: [
         { id: 1, name: 'x' },
         { id: 2, name: 'y' },
     ],
     premium: []
  }
}

我有一个可以创建新成员的表单。创建成员后，我在挂钩内有一个函数，我在其中调用 addMember 函数来添加这个新创建的成员。

function useGroup({ initialGroup: GroupType }: Props) {
    const [group, setGroup] = useState<GroupType>(initialGroup)

    const addMember = (member) => {
       group.members.regular = [...group.members.regular, member]
       setGroup(group)
    }

    return {
       group,
       addMember
    }
}

我可以使用控制台日志并看到它有效地工作，但这并没有反映在我的 UI 中。刷新页面时可以看到项目。这告诉我，当我在状态对象中推送额外的项目时，UI 没有“刷新”。

我觉得好像这是因为它是对象内部的嵌套数组。我应该将成员拆分成自己的“useState”数组，还是我缺少一些东西让我的 UI 反映这个被添加？

Answer 1

您正在直接更改状态变量。

尝试以下方法。

function useGroup({ initialGroup: GroupType }: Props) {
    const [group, setGroup] = useState<GroupType>(initialGroup)

    const addMember = (member) => {
       setGroup(state => {
          const _state = {...state};
                _state.members.regular.push(member);

          return _state;
       });
    }

    return {
       group,
       addMember
    }
}

更新：
您还可以使用useCallback 来防止过度创建addMember 函数。

const addMember = useCallback((member) => {
  setGroup(state => {
    const _state = {...state};
          _state.members.regular.push(member);

    return _state;
  });
}, []);

Answer 2

您实际上是在错误地更改状态变量。
您可以尝试修改 addMember 函数如下：

const addMember = (member) => {
        setGroup({...group,members:{
                regular: [...group.members.regular, member]
            }})
}

编辑：在 onClick（例如）上，您必须执行该函数，而不是调用它才能工作。
例如：<button onClick={addMember({...})}>Example</button>.
不是<button onClick={() => addMember({...})}>Example</button>