如何在我的 createContext() 和 createContext().Provider 中管理 2 个不同的状态？答案

【问题标题】：How can I manage 2 different states in my createContext() and createContext().Provider?如何在我的 createContext() 和 createContext().Provider 中管理 2 个不同的状态？
【发布时间】：2021-05-31 13:43:32
【问题描述】：

我有两种状态，一种是const [users, setUsers]，另一种是const [horizontalDiscussion, setHorizontalDiscussion]

用户，setUsers 部分正在工作，但水平讨论和 setHorizontalDiscussion 不工作。可能是在与 useContext(UserContext) 相同的上下文中执行此操作的原因？我不知道我在哪里做错了。你能帮帮我吗？

在 MainScreen.js 我只是写这个

     const [users, setUsers] = useContext(UserContext);
     const [horizontalDiscussion, setHorizontalDiscussion] = useContext(UserContext);

这里是 UserContextManager.js

import React, { createContext, useState } from 'react';
import HorizontalCircles from "../components/HorizontalDiscussion";
import HorizontalDiscussion from "../components/HorizontalDiscussion";

export const UserContext = createContext();


function UserContextManager(props) {
  // if i write const {users, setUsers} then i should UserContext.Provider value={{users,setUsers}}
  const [users, setUsers] = useState([
    <HorizontalCircles
      skeleton={true}
      key={0}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
    <HorizontalCircles
      skeleton={true}
      key={1}
      colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
      colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
    />,
  ]);

  const [horizontalDiscussion, setHorizontalDiscussion] = useState([
    <HorizontalDiscussion 
      skeleton={true} 
      key={0} 
      color={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} 
    />,
    <HorizontalDiscussion 
      skeleton={true} 
      key={1} 
      color={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} 
    />,

  ]);

  return (
    <UserContext.Provider value={[users, setUsers, horizontalDiscussion, setHorizontalDiscussion]}>
      {props.children}
    </UserContext.Provider>
  );
}

export default UserContextManager;

【问题讨论】：

你能详细说明它们是如何不工作的吗？你得到什么行为，你期望什么？
我希望他们做我分配的特殊事情。我的意思是每个州都有不同的角色。但是当我添加其他状态HorizontalDiscussion 时，它会执行其他状态的操作。但是它的作用其实是不同的，它只是没有看到它的作用，它做了users , setUsersstate 做的事情

标签： reactjs react-native use-context

【解决方案1】：

你必须使用对象解构而不是数组解构来获取上下文的值：

const {users, setUsers, horizontalDiscussion, setHorizontalDiscussion} = useContext(UserContext);

【讨论】：

成功了！！！太感谢了。因此，如果我想在我的上下文中管理多个状态，我必须进行对象解构吗？数组解构仅在我想管理一种状态时使用？是不是先生
没有。始终使用对象解构来获取上下文值。如果您使用的是 useReducer，则需要数组解构。
我以前不知道这个。你能告诉我如何用 useReducer() 做到这一点吗？哪个更好？
感谢您的帮助。顺便说一句，无论如何都可以与您联系，我的意思是如果我在 google 上找不到答案，我可以问您与 react、react-native 相关的问题，
我刚刚创建了一个主题，我将分享 React 等方面的想法。link.getangle.app/ZjMwon2ikJnCBmCv7

【解决方案2】：

如果觉得您的州名和进口商名称相同，我会阅读您的代码，然后可能会出现错误请尝试

import React, { createContext, useState } from 'react';
import HorizontalCircles from "../components/HorizontalDiscussion";
import HorizontalDiscussion from "../components/HorizontalDiscussion";
export const UserContext = createContext();
function UserContextManager(props) {
// if i write const {users, setUsers} then i should UserContext.Provider value= 
{{users,setUsers}}
 const [users, setUsers] = useState([
 <HorizontalCircles
  skeleton={true}
  key={0}
  colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
  colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
/>,
 <HorizontalCircles
  skeleton={true}
  key={1}
  colorFirst={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
  colorSecond={'rgb(' + 100 + ',' + 100 + ',' + 100 + ')'}
/>,
]);
 const [horizontalDiscussiontest, setHorizontalDiscussiontest] = useState([
 <HorizontalDiscussion 
  skeleton={true} 
  key={0} 
  color={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} 
 />,
 <HorizontalDiscussion 
  skeleton={true} 
  key={1} 
  color={"rgb(" + 100 + "," + 100 + "," + 100 + ")"} 
 />,

 ]);
  return (
 <UserContext.Provider value={[users, setUsers, horizontalDiscussiontest, 
  horizontalDiscussiontest]}>
  {props.children}
 </UserContext.Provider>
);
}export default UserContextManager;

【讨论】：

感谢先生的回复，但我不明白您的建议，对不起。顺便说一句，另一个回复的人解决了我的问题