应对不受控制的输入：更好地理解为什么它不会在价值变化时重新呈现

问题描述

代码

我有一个简单的<form>，其中既包含受控输入也包含不受控制的输入。

（link to codesandbox.io）

import React,{ useState,useEffect,useRef } from "react";

const ControlledInput = () => {
  const [value,setValue] = useState("controlled");

  useEffect(() => {
    console.log("Controlled: useEffect() cause value has changed to " + value);
  },[value]);

  console.log("Controlled: re-render with " + value);

  return (
    <div>
      <label>Controlled input</label>
      <input
        name={"controlled"}
        value={value}
        onChange={(ev) => setValue(ev.target.value)}
      />
    </div>
  );
};

const UncontrolledInput = () => {
  const [value,_setValue] = useState("uncontrolled");

  useEffect(() => {
    console.log(
      "Uncontrolled: useEffect() cause value has changed to " + value
    );
  },[value]);

  console.log("Uncontrolled: re-render with " + value);

  return (
    <div>
      <label>Uncontrolled input</label>
      <input name={"uncontrolled"} defaultValue={value} />
    </div>
  );
};

const App = () => {
  return (
    <form>
      <ControlledInput />
      <UncontrolledInput />
    </form>
  );
};

export default App;

我期望什么

在受控和非受控输入上每次更改输入值后，查看console.log消息

我会得到什么

它只发生在受控输入上，而不发生在不受控制的输入上。

问题

我知道React会自己处理不受控制的输入。并且，以某种方式，它避免了由于内部value处理输入而导致的输入重新呈现。但是...为什么此useEffect无法在进一步的value更改中运行？仅仅因为没有明确的setValue呼叫？

我对我以前的不完整假设的真实而合理的解释很感兴趣，但是，最重要的是：

我如何使useEffect更改后的value可以实际运行？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）