组件正在将文本类型的受控输入更改为不受控制 (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(() => {
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的值，请直接使用该 prop。 喜欢这个：

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