时间戳

首页 > 解决方案 > 防止 useState 重新渲染组件

reactjs - 防止 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>
}

标签： reactjsuse-state

解决方案

您需要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>
  )
}

您的组件确实重新渲染，因为它所依赖的变量不在反应范围内。所以它不能只触发对文本字段的更新

推荐阅读