使用useState结合Tabs切换React组件失败问题排查

你的代码里有两个关键问题导致Tabs切换无效：

1. 受控与非受控模式冲突
   React Bootstrap的Tabs组件中，你同时设置了defaultActiveKey和value属性。defaultActiveKey是非受控模式的初始值，而value配合onChange是受控模式，两者同时存在会导致状态管理混乱，切换时value不会正确更新。

2. Tab组件多余的value属性
   React Bootstrap的Tab组件不需要手动设置value，它是通过eventKey来和Tabs的value关联的，多余的value属性不会起作用，反而容易混淆。

修改后的代码 #

import React, {useState} from 'react';
import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';
import ClientOverview from '../client_dashboard/client_components/overview';
import ClientImpact from '../client_dashboard/client_components/impacts';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';


const ClientDashContainer = props => {
  const [value, setValue] = useState('overview');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return(
    <div style={{padding:'2%', backgroundColor:'#f5f5f5', minHeight:'95vh'}}>
        <Box>
            <FormControl style={{width:'15vw', minWidth:'fit-content'}}>
                <InputLabel id="demo-simple-select-label">Sites</InputLabel>
                <Select labelId="demo-simple-select-label" id="demo-simple-select" label="Sites">
                </Select>
            </FormControl>
        </Box>
        {/* 去掉defaultActiveKey，只保留受控的value和onChange */}
        <Tabs className="mb-3" justify value={value} onChange={handleChange}>
            {/* 移除Tab组件的value属性，只保留eventKey */}
            <Tab eventKey="overview" title="Overview"/>
            <Tab eventKey="impacts" title="Impacts"/>
        </Tabs>

        {value === 'overview' && <ClientOverview/>}
        {value === 'impacts' && <ClientImpact/>}
    </div>
);
}

export default ClientDashContainer;

修改后，点击Tabs标签时，handleChange会正确更新value状态，从而切换对应的组件。

内容的提问来源于stack exchange，提问作者Tevin-was-taken