Reactjs 使用firestore处理物料ui deafultValue异步问题

我正在为登录用户设置设置页面。他应该能够在字段中看到从firestore加载的预先存在的值，并对其进行编辑

问题：该值未显示在字段中，因为我认为，在加载material ui字段时，该值尚未“可用”

页面没有显示任何错误。它就是不起作用

这是对firestore数据库的调用，它工作正常。已使用console.log检查：

const [show, setShow] = React.useState([]);

React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const data = await db
      .collection("shows")
      .where('uid', '==', currentUser.uid)
      .get()
      setShow(data.docs.map(doc => doc.data()));
    }
    fetchData()
  }, [])

这是文本字段代码：

<TextField
              variant="outlined"
               required
               fullWidth
               id="showName"
               label="Show Name"
               name="showName"
               autoComplete="showname"
               defaultValue={show.lenght && show[0].showName}
             />

它装得很好，但它是空的。因此，它不会从firestore数据库加载defaultValue

---

问题是由“defaultValue”属性引起的。DefaultValue在第一次渲染后无法更新，因为它适用于未按文档所述控制的组件

所以你必须使用“价值”道具。

---

我创建了一个简单的示例（尝试将“value”属性更改为“defaultValue”）：

谢谢你，卢卡。它现在显示正确，但用户无法编辑它。我认为您必须添加onChange方法

onChange={（e）=>{setShow（e.target.value）；}}