如何解决禁止useState重新呈现组件
我有一个TextField,它在更改时使用useState更新状态。我面临一个问题,即状态更改后整个组件都将重新呈现,我希望仅TextField会发生更改。
const Uploader = ({ onUploadComplete }) => {
const [fields,setFields] = useState({});
const handleName = (event) => {
const { name,value } = event.target;
setFields((fields) => ({
...fields,[name]: { value: value },}
<React.Fragment>
<Grid item xs={4}>
<Card>{console.log('Card Media Rendered')}</Card>
</Grid>
<Grid item xs={8}>
<FormControl fullWidth>
<TextField
value={fields[file.id]?.value || ''}
onChange={handleName}
/>
</FormControl>
</Grid>
</React.Fragment>
}
解决方法
您需要像这样在功能组件内部移动useState
:
const Uploader = ({ onUploadComplete }) => {
const [fields,setFields] = useState({});
const handleName = (event) => {
const { name,value } = event.target;
setFields((fields) => ({
...fields,[name]: { value: value },}))
}
return (
<React.Fragment>
<Grid item xs={4}>
<Card>{console.log('Card Media Rendered')}</Card>
</Grid>
<Grid item xs={8}>
<FormControl fullWidth>
<TextField
value={fields[file.id]?.value || ''}
onChange={handleName}
/>
</FormControl>
</Grid>
</React.Fragment>
)
}
您的组件确实重新呈现,因为它所依赖的变量不在反应范围内。因此它不能仅触发对Textfield的更新
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。