如何在 React 中为来自数据库的输入设置默认值答案

【问题标题】：how to set the default value for the input from a db in React如何在 React 中为来自数据库的输入设置默认值
【发布时间】：2021-09-27 02:24:24
【问题描述】：

我有一个 checkout 类型的输入，我想使用 firestore 来获取默认值，然后将该值置于 state 中，并能够更改它并更新 store。这就是我现在的想法。

[visible,setVisible] = useState(false)
const data = commingFromFirebase();
return(
  <div>
   {
     data.map(el => <input type="checkbox" defaultValue={el.visible} value={visible} 
     onChange={e => setVisible(!visible)}/>
   }

  </div>
)

【问题讨论】：

标签： javascript html reactjs firebase google-cloud-firestore

【解决方案1】：

defaultValue 不能与 controlled component 一起使用 - 即 value 由 props 或 state 控制。

defaultValue 仅用于uncontrolled components

因为您的输入属于受控类型 - 对 props 或状态的更改将更改组件的状态 - 您不能使用defaultValue。

注意：在您的情况下，您使用的是复选框，因此道具是 checked（相当于 value）和 defaultChecked（相当于 defaultValue），如另一个答案所示。

【讨论】：

ty，对于defaultValue Adam的解释

【解决方案2】：

您可以使用返回布尔值的函数并将其作为checked 参数传递给复选框。这样，如果它返回 true 将被标记，如果它是 false 则不标记。

应该是这样的：

<input type="checkbox" checked={isChecked}

【讨论】：

是的，但我希望我可以从 firestore 设置默认值并能够通过状态更改它