时间戳

首页 > 解决方案 > 如何使用 useState 制作一个自定义钩子，如果状态改变，它可以更新多个元素？

reactjs - 如何使用 useState 制作一个自定义钩子，如果状态改变，它可以更新多个元素？

问题描述

考虑以下示例：

const useCounter = () => {
  const [count, setCount] = useState(0);
  return [ count, setCount ];
};
const Shower = () => {
  const [ value ] = useCounter();

  console.log(value); //stays 0

  return value;
}

const Setter = () => {
  const [ value, setValue ] = useCounter();

  console.log(value); //updates on click

  return <button onClick={() => setValue(value+1)}>
    Add
  </button>
}

const App = () => {
  return (
    <div className="App">
      <Setter />
      <Shower />
    </div>
  );
}

我究竟做错了什么？我希望无论在何处使用以及使用多少次，它都会使用相同的状态，并且如果该状态更新，它应该更新我认为使用它的每个组件。

有什么建议么？

标签： reactjs

解决方案

useState返回一对valueand setter。一条数据和一种更改它的方法，但是每次实例化一个新组件时，也会创建这对的一个新实例。是在组件之间而不是本身之间hooks共享 statetul 的好方法。调用 get 并创建一个实例。被调用并创建一个新实例。结构是一样的，不是。logicstateShoweruseCounterSetterstate

要在组件之间共享state，请使用props,redux或Context API

推荐阅读