Reactjs 组件正在将文本类型的受控输入更改为react中的非受控错误

我正在创建一个react应用程序，其中我有两个组件，即Parent和Child，但需要注意的是，我在整个应用程序中使用了无状态组件（functional component）和hook

//Parent.jsx

 import React, { useState } from "react";

    function Parent() {
    const [firstName, setFirstName] = useState("");
    const handleChange = event => {setFirstName(event.value);}
...
Rest Code
...
}

//Child.jsx

    function Child(props) {
          <label htmlFor="validationCustom01">First Name</label>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="enter first name"
                      value={props.firstName || ""}
                      onChange={props.handleChange}
                      required
                    />
    ...
Rest Code
...
    }

函数子（道具）{
名字
...
Rest代码
...
}

该页面呈现完美，但一旦写入文本框，就会出现以下错误

组件正在将文本类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控（反之亦然）。

---

我尝试了所有可能的解决方案，但都不起作用。然而，类似的功能在类组件中可以完美地工作，但在功能组件中却不能。有什么想法吗？

你确定

会发生这种情况吗？当

值

道具变为

未定义

或

空

时，会发生此切换。但是你的代码有明确的

| | |“

，在这种情况下会起作用。是的，这就是为什么我提到我尝试了谷歌所有可能的答案。你能制作实时沙盒吗？你确定

会发生这种情况吗？当

值

道具变为

未定义

或

空

时，会发生此切换。但是你的代码有明确的

| | |“

，在这种情况下可以工作。是的，这就是为什么我提到我尝试了谷歌所有可能的答案。你能制作实时沙盒吗？