反应自定义钩子useState初始化值不通过外部道具更新

Question

我有一个使用useState 具有语言环境状态值的自定义钩子，并且我从外部道具设置初始值，但是当我的道具更改时，我的内部状态值没有得到更新，此外我不太明白，我的组件或应用程序生命周期中有多少个自定义钩子实例每次被触发？

下面是代码示例：

// custom hook
const useCustomHook = (initValue) => {
   const [isFetching, setIsFetching] = useState(initValue);

   useEffect(() => {
      console.log('initValue :>> ', initValue, ', isFetching :>>', isFetching);
   }, [initValue, isFetching);
}
// component
const myComponent = (props) => {
   const [shouldTrigger, setShouldTrigger] = useState(false);

   useCustomHook(shouldTrigger);

   onButtonClick = () => {
     setShouldTrigger(true);
   }
}

这是我得到的控制台日志，

// when my component mouts
'initValue :>> ', false, ', isFetching :>>', false
// when button clicked
'initValue :>> ', true, ', isFetching :>>', false

如您所见，只要我从主组件将 shouldTrigger 设置为 true，我的自定义钩子就会被调用，但是，我的自定义钩子值中的本地状态值 isFetching 仍然是 false，应该是不是每次都会从外部道具分配？我上面的两个useCustomHook 是同一个实例还是不同？如果调用了不同的实例，为什么第二个实例没有将初始值设置为“true”？

这里是代码链接 https://stackblitz.com/edit/react-yma5my?file=index.js

Answer 1

1. 我不确定，但我认为这是因为如果您使用 useState，则只能定义一次此值。
2. and is my above two useCustomHook the same instance or different 他们会有所不同。

您可以将代码重写为

// custom hook
const useCustomHook = (initValue) => {
   const [isFetching, setIsFetching] = useState(initValue);

   useEffect(() => {
      console.log('initValue :>> ', initValue, ', isFetching :>>', isFetching);
   }, [initValue, isFetching);
  return [isFetching, setIsFetching]
}
// component
const myComponent = (props) => {
   const [isFetching, setIsFetching] = useCustomHook(false);

   onButtonClick = () => {
     setIsFetching(true);
   }
}

更新

我刚刚知道如何以你想要的风格写作，但我的第一个建议还是更好（我认为）

// custom hook
const useCustomHook = (value) => {
   const [isFetching, setIsFetching] = useState(value);

   useEffect(() => {
     setIsFetching(value);
   }, [value]);

   useEffect(() => {
      console.log('value :>> ', value, ', isFetching :>>', isFetching);
   }, [initValue, isFetching);
}
// component
const myComponent = (props) => {
   const [shouldTrigger, setShouldTrigger] = useState(false);

   useCustomHook(shouldTrigger);

   onButtonClick = () => {
     setShouldTrigger(true);
   }
}

它会导致额外调用 setState 但实现基于输入道具的状态更新；