组件正在将文本类型的受控输入更改为不受控制（useEffect）

Question

问题

我正在进行 API 调用，然后在获取数据后设置字段数据，但问题是它向我显示了错误（这篇文章的标题）。现在，我知道它的错误是针对其值未定义但我无法找到值何时未定义的输入

代码

这是我在渲染中的输入字段。

 <input
            type="text"
            placeholder="Company"
            name="company"
            value={company}
            onChange={e => onChangeHandler(e)}
          />

这是一个初始值

 const [formData, setFormData] = useState({
    company: ""
  });
 const {
    company
  } = formData;

这是我的useEffect

useEffect(() => {
    props.onFetched();

    setFormData({
      company:
        props.loading || !props.profile.company ? "" : props.profile.company,
    });
  }, [props.loading]);

formData 包含许多值，但为了简单起见，我在这里只粘贴了公司。 props.onFetched() 是获取数据并将其存储在 Redux 状态的 API 调用。

Answer 1

我发现这有一些问题。首先这个错误 A component is changing a controlled input of type text to be uncontrolled (useEffect) 并不意味着您的价值未定义。这意味着您的组件正在尝试将输入更改为不受控制的输入。

其次，如果 props.loading 由 redux saga/thunk 等设置，当您调用 props.onFetched() 并且您没有任何限制或验证时，它将在您的 useEffect 中创建无限循环

useEffect(() => {
    props.onFetched();

    setFormData({
      company:
        props.loading || !props.profile.company ? "" : props.profile.company,
    });
  }, [props.loading]);

第三，你真的不应该 setState 基于道具。如果您的输入组件需要 props.profile.company 的值，请直接使用该道具。像这样：

 <input
            type="text"
            placeholder="Company"
            name="company"
            value={props.profile.company}
            onChange={e => onChangeHandler(e)}
          />