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()时没有任何限制或验证，它将在您的{ {1}}

useEffect

第三，您确实不应该useEffect(() => { props.onFetched(); setFormData({ company: props.loading || !props.profile.company ? "" : props.profile.company, }); }, [props.loading]);基于道具。如果您的输入组件需要setState的值，则直接使用该道具。像这样：

props.profile.company

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

问题

代码

1 个答案: