时间戳

首页 > 解决方案 > 我的 React 钩子如何不尊重默认值？

reactjs - 我的 React 钩子如何不尊重默认值？

问题描述

我有一个这样的组件

export default function Panel() {
  const rpcClient = RpcClient.getInstance(PLUGIN_ID);

  setupOnce(rpcClient);

  const [currentXMPID, setCurrentXMPID] = useState<string | null>(null);

  function isAttachStorageOn(): boolean {
    if (!currentXMPID) {
      return false;
    }

    // real code looks at a cookie
    return true;
  }

  // This panel is frequently re-rendered and we need to use saved setting if XMP ID was retrieved already
  const renderAttachState = isAttachStorageOn();


  // this is outputting true
  console.log('set attach checked default to', renderAttachState);

  const [isAttachChecked, setAttachChecked] = useState(renderAttachState);

  // this is outputting false
  console.log('after using state', isAttachChecked);

  // This will only fire once
  useEffect(() => {
    (async () => {
      const xmpID = await rpcClient.getXMPID();

      setCurrentXMPID(xmpID);
      setAttachChecked(isAttachStorageOn());
    })();
  }, []);

  return <div>Just a test</div>;
}

我很困惑，因为它记录true然后false。这似乎零意义。我在一个我控制有限的应用程序中运行这个组件。我确实发现这个组件被重新渲染了很多，我想知道是否可能存在问题......但即使它重新渲染 1000 次，它也应该这样做以使console.logs 匹配。

更新

似乎钩子保持不变，首先给出的值useEffect只运行一次。如果我设置setAttachChecked为该bananas方法，则后续调用不会更新它。

标签： reactjsreact-hooks

解决方案

好吧，我不确定这是否是您正在寻找的解决方案。

useState用于设置默认值。这条线在这里

console.log('after using state', isAttachChecked);

用于显示isAttachChecked价值。它可能第一次等于defaultValue第一次，但之后可能不会，即使你在useState钩子之后调用它。

推荐阅读