Question

我正在使用Material-Ui的一些输入。我正在从API加载这些输入的值。如果值不存在，则用户必须输入它们。

我正在使用Hooks，初始状态为：const [bankDetails, setBankDetails] = useState({});

我的输入配置如下：

                <TextField
                  id="outlined-bank-name"
                  label={t("Bank name")}
                  placeholder={t("Type bank name")}
                  margin="normal"
                  variant="outlined"
                  name="BankName"
                  type="text"
                  value={bankDetails.bankName}
                  onChange={e =>
                    setBankDetails({
                      ...bankDetails,
                      bankName: e.target.value
                    })
                  }
                />

这很好，但是每次我输入一些内容时都会显示警告：

警告：组件正在将文本类型的不受控制的输入更改为被控制。输入元素不应从不受控制的切换到控制（反之亦然）。决定使用受控还是组件生命周期中不受控制的输入元素。

我不知道原因，因为我定义了value和onChange道具。

解决此问题的最佳方法是什么？

Answer 1

您收到此警告是因为您使用过：

const [bankDetails, setBankDetails] = useState({});

bankDetails作为空白对象，因此在第一次渲染期间，bankDetails.bankName将是未定义的，并且输入字段的值将为：

value={undefined}

像这样修改钩子：

const [bankDetails, setBankDetails] = useState({bankName: ''});

ReactJS：对受控输入的警告

1 个答案: