将 useState 与文本区域一起使用时出错

Question

我收到此警告。警告：组件正在将受控输入更改为不受控。这可能是由于值从已定义变为未定义而导致的，这不应该发生。在组件的生命周期内决定使用受控或非受控输入元素。我正在使用功能组件。我使用 useState 初始化了描述。

 const [description, SetDescription] = useState('');

然后我调用 API 从那里我得到一个数组数据。 data.description 不为空并且给出了正确的结果我已通过 console.log.

检查过

 SetDescription(data.description);

这是textarea的代码。

<textarea
      id="description"
      value={description}
      onChange={(e) => {
          SetDescription(e.target.value);
      }}
  />

Answer 1

发生这种情况是因为您正在设置初始状态：

const [description, SetDescription] = useState('');

试试这个：

const [description, SetDescription] = useState();

<textarea
      id="description"
      value={description || ''}
      onChange={(e) => {
          SetDescription(e.target.value);
      }}
  />

添加了此工作的沙箱示例https://codesandbox.io/s/blissful-fire-5gf1g?file=/src/App.js

export default function App() {
  const [description, SetDescription] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => SetDescription(json.title));
  }, []);

  return (
    <textarea
      id="description"
      value={description || ""}
      onChange={(e) => {
        SetDescription(e.target.value);
      }}
    />
  );
}

此外，您还没有说明如何从 api 获取数据，这很重要，因为它需要在 useEffect 中或使用 useCallback。我已经更新了沙盒 link 以显示这一点，因此当您在文本区域中键入内容时，它会正确更新文本区域的状态。

Answer 2

如果我没理解错，那么要从服务器接收数据，您需要使用 useEffect 挂钩。

export default function App() {
  const [description, setDescription] = useState("");

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setDescription(JSON.stringify(json)));
  }, []);

  return (
    <div className="App">
      <textarea
        value={description || ""}
        onChange={(e) => setDescription(e.target.value)}
      />
      <br />
      <p>{description}</p>
    </div>
  );

从服务器接收到的数据是什么格式？

Answer 3

如您的错误消息所述这可能是由于值从已定义变为未定义造成的，这不应该发生。您可以尝试检查响应并仅在 data.description 未定义时才赋值。

if (data && data.description) SetDescription(data.description);

这可能会解决您的警告

将 useState 与文本区域一起使用时出错

Getting error while using useState with textarea

textarea

reactjs

react-functional-component

use-state