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

Question

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

users、setUsers 部分有效，但 horizontalDiscussion 和 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;

Answer 1

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

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

Answer 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;

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

How can I manage 2 different states in my createContext() and createContext().Provider?

reactjs

react-native

use-context