在对象内的数组将项目推送到它之后，React 组件不会重新呈现

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 不是 'refreshing'。

我感觉好像这是因为它是对象内部的嵌套数组。我应该将成员拆分到自己的 '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>

在对象内的数组将项目推送到它之后，React 组件不会重新呈现

React component not rerendering after array inside object has items pushed to it

reactjs

react-hooks

use-state