reactjs 为什么react js中的变量值没有在函数内部更新?

8xiog9wr  于 2023-04-11  发布在  React
关注(0)|答案(2)|浏览(196)

我在reactjs中发送一个函数作为 prop 。我有一个状态“表单提交”或“未提交”。我在函数内部得到错误的输出(控制台输出)。不知道为什么?但是在函数外部我得到了正确的值。
下面是我的代码https://codesandbox.io/s/cool-dawn-0uu62q?file=/src/nested.tsx

const NestedComponent = () => {
  const { registerState, formState } = useHookFormContext();
  console.log(formState.isSubmitted, "outside");

  return (
    <>
      <CustomApi
        key={"abc"}
        options={[]}
        onChange={() => {
          console.log(formState.isSubmitted, "inside");
          console.log("sss");
        }}
      />
    </>
  );
};

重现bug的步骤

  • 运行应用程序.看到控制台它将显示这是正确的.
  • 点击提交按钮。查看控制台,它将显示true,这是正确的。
  • 现在更改下拉列表的值。查看控制台,它将显示false值,这是不正确的正确。为什么显示不同的值

这是关闭问题吗???

dfty9e19

dfty9e191#

此版本的mui-react-hook-form-plus- v1.3.5已修复
忘记在每个渲染周期中重新分配onChangeRef。因此,闭包获得了prev值

+ const onChangeRef = React.useRef(onChange);
+ /**
+  * we update the ref on every render
+  */
+ onChangeRef.current = onChange;

示例:https://codesandbox.io/s/quizzical-nova-ur0rv8?file=/src/nested.tsx

mrzz3bfm

mrzz3bfm2#

该问题可能与JavaScript中的闭包有关。当您在NestedComponent中定义onChange函数时,它会在定义formState.isSubmitted时捕获formState.isSubmitted的值。如果formState.isSubmitted的值更改,则onChange函数仍将引用旧值。
要解决这个问题,您可以使用useEffect钩子来设置一个副作用来侦听formState.isSubmitted的更改。下面是一个如何使用useEffect来实现这一点的示例:

import { useEffect, useCallback } from 'react';

const NestedComponent = () => {
  const { registerState, formState } = useHookFormContext();
  console.log(formState.isSubmitted, "outside");

  const handleChange = useCallback(() => {
    console.log(formState.isSubmitted, "inside");
    console.log("sss");
  }, [formState.isSubmitted]);

  useEffect(() => {
    // This function will run whenever formState.isSubmitted changes.
    handleChange();
  }, [handleChange]);

  return (
    <>
      <CustomApi
        key={"abc"}
        options={[]}
        onChange={handleChange}
      />
    </>
  );
};

在这个例子中,useCallback钩子用于创建handleChange函数的记忆版本,该版本仅在formState.isSubmitted更改时更新。然后,useEffect钩子用于设置一个副作用,每当函数的记忆版本更改时,该副作用就会运行handleChange。这确保handleChange中的控制台日志将始终显示formState.isSubmitted的最新值。

相关问题