reactjs - 好奇的反应行为

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 没有被触发。想法？PS 该代码不用于生产，只是在胡闹。

标签： reactjsreact-hooks

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