Reactjs 为什么要使用JS表单'；s输入预填充了加载时的值不'；我不允许再更新它了

我使用的表单应允许用户更新已保存数据的内容。之后，我将现有数据加载到表单输入中，如下所示：-

  <input value={profile.displayName} 
  name="displayName" type="text" 
  placeholder="Display Name" 
  /> // it dosn't work  So I tried next

  <input value={profile.displayName} 
  name="displayName" type="text" 
  placeholder="Display Name" 
  onChange={(e) => {setDisplayName(e.target.value )}}/> // Same issue

}

---

因此，该配置文件作为道具来自另一个组件。这部分很好。此外，将数据加载到表单中也很好。但加载数据后，我不能再编辑它了

假设你有一个像下面这样的钩子

const [displayName, setDisplayName] = useState('');

在useEffect中，设置配置文件时也会设置显示名称

setDisplayName(props.location.state.profile.displayName)

最好在常量中销毁配置文件

const  { profile } = props.location.state;

最后在输入端

    <input value={displayName} name="displayName" type="text" placeholder="Display Name" onChange={(e) => {setDisplayName(e.target.value )}}/>

{setDisplayName（e.target.value）}}/>

您将初始配置文件设置为空对象，但将输入的默认值指定给

配置文件。displayName

为

未定义

，react将抛出以下警告

警告：组件正在更改要控制的文本类型的非受控输入。输入元件不应从非受控切换到受控（反之亦然）。在组件的使用寿命内，决定使用受控或非受控输入元件*

您的初始对象应该是

const [profile, setProfile] = useState({
  displayName: ""
});

然后更新值，如

<input
  value={profile.displayName}
  name="displayName"
  type="text"
  onChange={e => {
    setProfile({ ...profile, displayName: e.target.value });
  }}
/>

{
setProfile（{…profile，displayName:e.target.value}）；
}}
/>

//获取一个钩子函数
const{useState，useffect}=React；
函数App（）{
const[profile，setProfile]=useState({
显示名称：“”，
性别：“，
职业：“
});
useffect（（）=>{
setProfile({
displayName:“StackOverflow”，
性别：“男性”，
职业：“软件工程”
});
}, []);
返回(
{
setProfile（{…profile，[e.target.name]：e.target.value}）；
}}
/>
{
setProfile（{…profile，[e.target.name]：e.target.value}）；
}}
/>
{
setProfile（{…profile，[e.target.name]：e.target.value}）；
}}
/>
显示名称：{profile.displayName}

性别：{profile.gender}

职业：{profile.occulation}

);
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

请分享您如何为
setDisplayName
初始化配置文件和代码。配置文件是一个对象，但setDisplayName使用的字符串可能会覆盖配置文件对象。请检查更新的部分以获得澄清。我正在使用钩子。但是我不能将初始状态设置为useState（profile.displayName）。因为我在后期得到了个人资料。无论如何，我在乞讨中初始化它为空。请检查更新的文本。您仍然可以执行类似onChange={（e）=>{setProfile（{…profile，displayName:e.target.value}}}}的操作。虽然我建议将displayName保持在回答中给出的单独的useState中，并在useEffect中可用时设置displayName，或者将输入移动到新组件，并将displayName作为profile对象中的Prop，但我没有几个其他成员，例如realName:“”、birthDate:“”、height:0、cityLocation:“”，职业：''，关于我：''，性别：''，那么他们都是怎么做的呢？setProfile（{…profile，displayName:e.target.value}）；只设置displayName。我将更新我的答案以包含对象的其余部分。使用reducer设置这种复杂对象不是更好吗？能告诉我怎么用减速机吗？我在网上看的，我不知道怎么做？我试着通过做减速机来学习它。Thx，它工作得很好。但我真的很想看看减速机是如何实现的。请在这里阅读更多关于它的内容
<input
  value={profile.displayName}
  name="displayName"
  type="text"
  onChange={e => {
    setProfile({ ...profile, displayName: e.target.value });
  }}
/>