[useEffect用于设置输入值时抛出错误

Question

我正在尝试制作一个将由react控制的输入组件，并在更改道具时更新其值。

这就是我的做法：

import React from 'react';

function Component(props) {
  const [url, setUrl] = React.useState(props.value);

  React.useEffect(() => {
    setUrl(props.value);
  }, [props.value]);

  function handleChange(event) {
    setUrl(event.target.value)
  }

  return (
    <div>
      <input
        type="text"
        onChange={handleChange}
        value={url}
      />
    </div>
  );
}

尽管逻辑有效，但我仍然收到一个错误消息，说我的组件正在从受控状态切换到不受控制状态，但是我不明白为什么会是这种情况。

Answer 1

我不了解useEffect的目的。如果父组件的状态发生变化，则子组件的道具将自动更新。

此外，我将useCallback用于您的handleChange方法。

const handleChange = React.useCallback((event) => setUrl(event.target.value));