Question

我想对自定义输入进行反跳，但是我的问题是我无法在初始渲染时从触发器中停止useEffect

import { useDebouncedCallback } from "use-debounce";

interface myInputProps {
  getValue: any;
}

const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState("");

  React.useEffect(() => {
    getValue(value);
  }, [value]);

  return (
    <input type="text" value={value} onChange={e => setValue(e.target.value)} />
  );
};

export default function App() {
  const [debouncedCallback] = useDebouncedCallback(value => {
    console.log(value);
  }, 1000);

  return (
    <div className="App">
      <MyInput getValue={debouncedCallback} />
    </div>
  );
}

https://codesandbox.io/s/upbeat-lamport-ukq70?file=/src/App.tsx

我也尝试过useLayoutEffect，但不能解决问题。

Answer 1

我们可以使用useRef来跟踪是否是第一次运行useEffect挂钩。

https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

沙盒链接：https://codesandbox.io/s/confident-cerf-flkf2?file=/src/App.tsx


const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState("");
  const first = useRef(true);

  React.useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    getValue(value);
  }, [value]);

  return (
    <input type="text" value={value} onChange={e => setValue(e.target.value)} />
  );
};

Answer 2

将初始值设置为undefined，然后可以显式检查undefined。一旦用户输入，它就不会被取消定义。

const MyInput = ({ getValue }: myInputProps) => {
  const [value, setValue] = useState(undefined);
  React.useEffect(() => {
   if (value === undefined) {
      return;
    }
    getValue(value);
  }, [value]);

  return (
    <input type="text" value={value} onChange={e => setValue(e.target.value)} />
  );
};

阻止useEffect在初始渲染上触发

2 个答案: