如何修复 TextField Material UI 中的警告“组件不受控制”答案

【问题标题】：How to fix warning 'component uncontrolled' in TextField Material UI如何修复 TextField Material UI 中的警告“组件不受控制”
【发布时间】：2022-01-02 13:41:42
【问题描述】：

我尝试使用 Material UI 的 TextField 作为 React 的受控组件，根据文档它应该可以工作：

function SomeFunction (){

const [name, setName] = useState('some value')
  const handleChange = (e) => {
    setName(e.target.value)
  }
return (
<>
<TextField sx={{width:'50%'}} value={name}
 onChange={handleChange} id="outlined-basic" label="Имя" variant="outlined"/>
</>
)
}
export default SomeFunction

但是有一个警告一个组件正在改变一个不受控制的输入来控制。 请问如何解决这个问题？

【问题讨论】：

你能展示你的实际代码吗？这个没有意义，因为如果这是一个函数，你不会返回任何东西，如果它不是一个函数，而是一个 JSX sn-p 那么 JS 代码放错了位置。
你能创建一个codesandbox以便轻松地重新创建它吗？
问题已更新
这个组件看起来不错，你确定错误来自这个吗？
当我使用纯html输入时没有错误，但需要使用TextField。

标签： reactjs material-ui

【解决方案1】：

尝试将TextField 更改为此

<TextField 
   sx={{width:'50%'}} 
   value={name || ''}
   onChange={handleChange} 
   id="outlined-basic" 
   label="Имя" 
   variant="outlined"
 />

【讨论】：

同样的故事，不工作
当您给 TextField 一个初始值“未定义”然后尝试将其更改为某个值时，通常会出现此警告。毗湿奴的回答是有道理的，因为未定义的值最初被空字符串替换。确保您使用的是 value={name|| ''}。除此之外，分享您正在使用的实际代码。