Question

我有以下代码（使用React钩子）：

const { state, dispatch } = useContext(Store);

const [branch, setBranch] = useState<TaskingBranchState | null>(null);
const handleBranchChange = (event: ChangeEvent<{}>, newValue: TaskingBranchState | null) => {
    setBranch(newValue);
    setBranchMembers([]);
}
const [branchMembers, setBranchMembers] = useState([]);
const handleBranchMembersChange = (event: ChangeEvent<{}>, newValue: any) => {
    setBranchMembers(newValue);
}

在代码后面的某个地方，我正在执行useQuery以获取branchMembers，该state被分派到我的全局useQuery(GET_BRANCH_MEMBERS(["id", "name"]), { variables: { branchId: branch?.branchId }, onCompleted: (data) => { if (data !== undefined && data.getBranchMembers !== undefined && data.getBranchMembers !== state.branchMembers) { dispatch({ type: 'DISPATCH_TYPE', payload: { branchMembers: data.getBranchMembers } }); } } });中。如果重要的话，它看起来像这样：

dispatch

其中payload将state写到全局state（与useContext相同的state.branchMembers）。

我的问题是：

我应该使用useQuery（setBranchMembers调度到的全局值）还是直接调用branchMembers并使用上面定义的局部useState状态？
有什么区别？
在这两种情况下，我是否都不再需要定义全局状态（如果对Q1回答为否）还是不再需要在本地df['avg'] = df.iloc[:, 2:].mean(axis=1)进行任何定义（如果对Q1回答为是）？

曾经迷恋我的代码片刻，才意识到我有这种困惑。对React hooks tbh不太熟悉，因此，如果这是一个基本问题，请也提供帮助。

谢谢！

Answer 1

这取决于您是否要在不同组件之间共享branchMembers。

由于您已经将branchMembers分发到了全局状态，所以我假设您确实想共享它。因此，您只能使用全局状态并删除useState

const { state, dispatch } = useContext(Store);
...
doSomethingWith(state.branchMembers);
...

不需要使用全局状态数据（来自上下文）到本地状态（来自useState）来使用它。您可以立即使用上下文中的数据。

更新

如果您的branchMembers依赖于branch，则只需继续分发branchData和branchMembers。只是记得要写在减速器上

dispatch({
  type: "WRITE_BRANCH_AND_BRANCH_MEMBERS",
  payload: {
    branch: branchId, // or branch or branchData whatever needed
    branchMembers: data.getBranchMembers,
  },
});


// your-reducer.js
function reducer(state, action) {
  ...

  switch (action.type) {
  case "WRITE_BRANCH_AND_BRANCH_MEMBERS": {
    newState = {
      ...state,
      branch: action.payload.branchId,
      branchMembers: action.payload.branchMembers,
    }
    break;
  }

  ...

  }
}

我应该使用全局状态还是React钩子的本地状态？

1 个答案: