Question

最近，我一直在玩React钩子，偶然发现了一些我无法弄清楚的东西。

  const [value, setValue] = useState("");

  const [filtered, setFiltered] = useState("");

  useLayoutEffect(() => {
    setFiltered(value);
  }, value);

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

在我尝试退格或删除之前，上面的代码可以正常工作。 onChange不会触发。有什么想法吗？附言该代码不是用于生产的，只是在鬼混。

Answer 1

如果仅将useLayoutEffect的第二个参数作为数组而不是字符串，上述代码将正确运行

const [value, setValue] = useState("");

  const [filtered, setFiltered] = useState("");

  useLayoutEffect(
    () => {
      setFiltered(value);
    },
    [value]
  );

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

好奇的反应行为

1 个答案: