反应上下文值答案

【问题标题】：React Context value反应上下文值
【发布时间】：2021-12-29 15:23:06
【问题描述】：

这是我的用户上下文。我在这里存储所有用户和一些功能。

export const UsersContext = createContext([]);

export const UsersProvider = (props) => {
  const [allUserslist, setAllUsersList] = useState([]);

  const handleDeleteUserContext = (cardID) => {
    console.log(allUserslist);
    const userListAfterDeletion = allUserslist.filter((element) =>  element.cardID !== cardID  )
    setAllUsersList(userListAfterDeletion);
  };

  return (
    <UsersContext.Provider
      value={[allUserslist, setAllUsersList, handleDeleteUserContext]}
    >
      {props.children}
    </UsersContext.Provider>
  );
};

问题有没有办法以其他方式传递价值？

因为我必须像这样调用上下文：

const [allUserslist, setAllUsersList, handleDeleteUser] = useContext(UsersContext);

如果我在上下文中添加一个函数，我也必须在此处添加它。这令人沮丧。我尝试将值作为对象传递，但它不起作用。我也尝试过解构：

const {allUserslist, setAllUsersList, handleDeleteUser} = useContext(UsersContext);

【问题讨论】：

肯定将其作为对象而不是数组传递。您根本不需要使用解构，只需将整个上下文分配给一个简单的变量：const context = useContext(UsersContext);。
谢谢伙计。成功了！

标签： reactjs frontend

【解决方案1】：

如果要将其提取为对象属性，则应将对象作为上下文值传递：

export const UsersContext = createContext({});

export const UsersProvider = (props) => {
  const [allUserslist, setAllUsersList] = useState([]);

  const handleDeleteUserContext = (cardID) => {
    console.log(allUserslist);
    const userListAfterDeletion = allUserslist.filter((element) => element.cardID !== cardID);
    setAllUsersList(userListAfterDeletion);
  };

  return (
    <UsersContext.Provider value={{ allUserslist, setAllUsersList, handleDeleteUserContext }}>
      {props.children}
    </UsersContext.Provider>
  );
};

然后在组件的某个地方你可以像这样使用它：

const { allUserslist, setAllUsersList, handleDeleteUser } = useContext(UsersContext);

【讨论】：