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

Question

我有一个checkout类型的输入，我想使用firestore来获取默认值，然后将该值放入状态，并能够更改和更新存储。这就是我现在的想法。

[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>
)

Answer 1

defaultValue不能与受控组件一起使用，即value由道具或状态控制的组件。

defaultValue仅用于非受控组件

因为您的输入是受控类型的——对道具或状态的更改将更改组件的状态——所以不能使用defaultValue。

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

Answer 2

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

应该是这样的：

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