好奇的反应行为

Question

我最近一直在玩 React hooks，偶然发现了一些我不太明白的东西。

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

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

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

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

在我尝试 Backspace 或 Delete 之前，上面的代码工作正常。 onChange 没有被触发。想法？ P.S。该代码不适合生产，只是胡闹。

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)}
    />
  );

好奇的反应行为

Curious React behavior

reactjs

react-hooks