如何在不重新渲染MUI TabPanel的情况下更新useState状态？

问题描述 #

需求意图 #

从后端获取数据，展示并允许用户编辑后提交，不修改原始数据副本（后端负责验证）。将后端数据作为输入框默认值，用户修改的内容存入newValues字典，提交时使用该新字典；未保存时前端保留原始数据，无需重复请求后端。

问题现象 #

TabPanel子组件（如TextField）触发onChange事件时，TabPanel会重新渲染，导致TextField重载默认值且失去焦点，无法正常使用。

示例代码 #

EditDialog.jsx

...MUI Component Imports
import EditInfo from './EditInfo.jsx'
import EditNotifications from './EditNotifications.jsx'

// Main Function start
export default function EventEditDialog(props){

  const { socket, open, onClose, id, eventData } = props;

  const [payload, setPayload] = useState()
  const [newValues, setNewValues] = useState({})

  // Editable Data Fields
  const [tabValue, setTabValue] = useState(0)

  {/*
      useEffect Hooks
  */}
  useEffect(() => {
    console.log('EventEditDialog->eventData', eventData)
  }, [eventData] )

  useEffect(() => {
    setPayload({...newValues, 'modified_by': 'Web User'})
    console.log('EventEditDialog->newValues = ', newValues)
  }, [newValues] )

  {/* 
    MUI Tab setup
  */}
  function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
      <div style={{ display: 'flex', height:'100%', width: '100%'}}
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}>
          {value === index && (
            <Box sx={{ marginBottom: 5, width: '100%' }}>
              {children}
            </Box>
          )}
      </div>
    );
  }

  TabPanel.propTypes = {
    children: PropTypes.node,
    value: PropTypes.number.isRequired,
    index: PropTypes.number.isRequired,
  };

  function tabProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

  const handleChangeTab = (event, newValue) => {
    setTabValue(newValue)
  }
  // End Tabs

  {/*
      Edit Dialog Apply and Close Functions
  */}
  const handleEditEvent = (value) => {
    onClose(value);
    if (Object.keys(payload).length > 0) {
      console.log('[ModalEdit] payload: ', payload)
      SendEdit(socket, eventData.event_id, payload)
    }
  }

  const handleCloseEdit = () => {
    onClose()
  }

  return (
    <Dialog onClose={handleCloseEdit} open={open} PaperProps={{ style: { minWidth:"60%" }}} >
      <DialogTitle>Edit Event</DialogTitle>
      <DialogContent style={{maxHeight: "85%"}} >
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={tabValue} onChange={handleChangeTab} aria-label="simple tab example">
            <Tab label="Event Info" {...tabProps(0)} />
            <Tab label="Notifications" {...tabProps(1)} />
          </Tabs>
          <TabPanel value={tabValue} index={0}>
            <EditInfo id={id} eventData={eventData} newValues={newValues} setNewValues={setNewValues}/>
          </TabPanel>
          <TabPanel value={tabValue} index={1}>
            <EditNotifications eventData={eventData}/>
          </TabPanel>
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCloseEdit}>Cancel</Button>
        <Button onClick={handleEditEvent}>Apply</Button>
      </DialogActions>
    </Dialog>
  )
}

EventEditDialog.propTypes = {
  onClose: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
}

EditInfo.jsx

...MUI Component Imports

export default function EditInfo(props){
  const { id, eventData, newValues, setNewValues } = props

  {/*
    useEffect Hooks
  */}
  useEffect(() => {
    console.log('EditInfo->eventData', eventData)
  }, [eventData] )

  useEffect(() => {
    console.log('EditInfo->newValues= ', newValues)
  }, [newValues] )

  return (
    <>
      <Grid container spacing={1} marginTop={2}>
        <Grid xs={1}>
          <TextField
            id="event-id"
            label="Event"
            value={id}
            sx={{width: '100%'}}
            disabled
          />
        </Grid>
        <Grid xs={10}>
          <TextField
            required
            id="event-name"
            label="Name"
            defaultValue={eventData.name}
            sx={{width: '100%'}}
            onChange={e => {
              setNewValues({...newValues, 'name': e.target.value})
              console.log('TextField->newValues', newValues)
            }}
          />
        </Grid>
      </Grid>
    </>
  )
}

EditInfo.propTypes = {
  eventData: PropTypes.object.isRequired,
}

核心问题 #

如何在数据变更时避免TabPanel重新渲染，同时正常获取子组件的输入数据？

解决方案 #

1. 将TextField改为受控组件 #

当前使用defaultValue绑定原始数据，组件重渲染时会重置输入内容。改用value绑定newValues字段， fallback到原始数据：

// EditInfo.jsx 中的TextField修改
<TextField
  required
  id="event-name"
  label="Name"
  value={newValues.name || eventData.name}
  sx={{width: '100%'}}
  onChange={e => {
    // 用函数式更新避免快照依赖问题
    setNewValues(prev => ({...prev, 'name': e.target.value}))
  }}
/>

2. 将TabPanel移到父组件外部定义 #

把TabPanel放在EventEditDialog函数外部，避免父组件状态变化时重复创建组件，导致子组件卸载再挂载：

// 移到EventEditDialog外部
function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div style={{ display: 'flex', height:'100%', width: '100%'}}
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}>
        {value === index && (
          <Box sx={{ marginBottom: 5, width: '100%' }}>
            {children}
          </Box>
        )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  value: PropTypes.number.isRequired,
  index: PropTypes.number.isRequired,
};

export default function EventEditDialog(props){
  // ... 原组件内容
}

3. 用memo优化子组件重渲染 #

给EditInfo添加React.memo，减少不必要的重渲染：

// EditInfo.jsx 顶部导入memo
import { memo } from 'react';

// 导出时包裹memo
export default memo(function EditInfo(props){
  // ... 原组件内容
});

4. 简化payload生成逻辑 #

移除监听newValues的useEffect，提交时直接生成payload，减少状态更新次数：

// 修改handleEditEvent函数
const handleEditEvent = (value) => {
  onClose(value);
  if (Object.keys(newValues).length > 0) {
    const payload = {...newValues, 'modified_by': 'Web User'}
    console.log('[ModalEdit] payload: ', payload)
    SendEdit(socket, eventData.event_id, payload)
  }
}

最终效果 #

• 输入框不会因重渲染丢失焦点，内容保持用户输入的最新值
• TabPanel不会重复创建，避免子组件卸载挂载
• 原始数据eventData始终不变，仅newValues存储用户修改内容，符合需求

内容的提问来源于stack exchange，提问作者ChromeBlue