Javascript 使用挂钩编辑反应状态

我想有一个全局变量，我可以在任何地方编辑使用挂钩

在这个例子中，我有两个组件都使用同一个钩子。在我看来，

外部切换

正在编辑自己的作用域

计数

，

内部切换

也在更改自己的作用域

是否可以让两个开关编辑相同的数据

代码示例：

index.js

---

要完成此任务，您应该通过上下文API共享您的状态

考虑以下几点：

const CounterContext = React.createContext({
  count: 0,
  increment: () => null,
});

const changeCount = () => {
  const counter = useContext(CounterContext);

  return <button onClick={() => counter.increment(!counter.count)}>External Toggle</button>;
}

const App = () => {
  const { count, increment } = useCounter();
  return (
    <CounterContext.Provider value={{ count, increment }}>
      {`${count}`}
      <br />
      <ChangeCount />
      <br />
      <button onClick={() => increment(!count)}>Internal Toggle</button>
    </CounterContext.Provider>
  );
}

const CounterContext=React.createContext({
计数：0，
增量：（）=>null，
});
常量更改计数=（）=>{
常量计数器=useContext（计数器上下文）；
返回counter.increment（！counter.count）}>外部切换；
}
常量应用=（）=>{
常量{count，increment}=useCounter（）；
返回(
{`${count}`}




增量（！计数）}>内部切换
);
}

---

有关更多信息，请访问：

，因为您已经注意到自定义挂钩用于共享有状态逻辑，而不是实际状态

如果您想共享一段状态，可以使用该功能，将对象中的

count

变量和

increment

函数传递给

提供者的
值
道具，并使用
useContext
进一步使用它

示例


const{createContext，useContext，useState}=React；
const CounterContext=createContext（）；
函数ChangeCount（）{
const{increment}=useContext（CounterContext）；
返回外部增量；
}
函数App（）{
const[count，setCount]=useState（0）；
函数增量（）{
设置计数（计数+1）；
}
返回(
{count}
内部增量
);
}
render（，document.getElementById（“根”））

谢谢@tholle。我最大的问题是，我无法将我需要的
数据
打包到提供商那里。我试图实现的一个特殊目标是，每当编辑数据时，让我的全局可访问的
组件显示加载图标，然后在加载完成后将其关闭。我担心我现在必须使用
mobx
。@JamieHutber您可以将上下文与
提供程序
一起使用，例如
isLoading、setLoading
，并且您的
组件通过上下文使用
isLoading
来显示加载指示器，其他组件可以使用
setload
来更改其值。有趣的是，我确实尝试过这个，我相信：这里也有一个例子。@JamieHutber啊，我明白了。在索勒干得不错。我必须说，这感觉有点反模式。我假设大多数时候，上下文和钩子api都是这样设计的。这让我觉得很奇怪，我一直认为这是redux的替代品不是吗？
import { useState } from "react";
export default function useCounter() {
  const [count, setCount] = useState(false);
  const increment = (changeCount) => setCount(changeCount);
  return { count, increment };
}

const CounterContext = React.createContext({
  count: 0,
  increment: () => null,
});

const changeCount = () => {
  const counter = useContext(CounterContext);

  return <button onClick={() => counter.increment(!counter.count)}>External Toggle</button>;
}

const App = () => {
  const { count, increment } = useCounter();
  return (
    <CounterContext.Provider value={{ count, increment }}>
      {`${count}`}
      <br />
      <ChangeCount />
      <br />
      <button onClick={() => increment(!count)}>Internal Toggle</button>
    </CounterContext.Provider>
  );
}