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的目的。如果父组件的状态发生变化，那么子组件的 props 将自动更新，因为它会触发重新渲染。只需删除您的 useEffect 代码，它应该可以正常工作。

此外，我相信这会触发无限循环，因为每次更新 url 时，都会触发 useEffect 挂钩，这会更新 url，这会触发useEffect等

在 props.value:

上设置默认值也是个好主意

const [url, setUrl] = React.useState(props.value || '');

顺便说一下，我会用 useCallback 作为你的 handleChange 方法。

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

这将记忆函数以获得更好的性能。

Answer 2

改变

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

到

const [url, setUrl] = React.useState(props.value || '');

因为一开始 props.value（和你的 url）将是未定义的，然后再定义。这意味着输入字段从不受控制转换为受控。

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

useEffect throws an error when used to set input value

javascript

html-input

reactjs

react-hooks

use-effect