react-select重渲染时已选值丢失，如何让选中值不受showComponentA状态影响？

问题根因 #

你当前的实现中，showComponentA 为 false 时组件A会被直接卸载，组件内部存储的react-select选中状态会被完全清空，下次showComponentA变为true时会渲染一个全新的组件A实例，自然就看不到之前的选中值了。

解决方案 #

• 方案1：不卸载组件，用CSS控制显隐（改造成本最低）
  直接修改组件B的渲染逻辑，不再用三元判断卸载组件，改为通过display属性控制显隐，组件始终挂载，内部状态会自动保留：

// Component B 修改后代码
<div>                
  <ComponentA 
    PropA={propA}
    PropB={propB}
    style={{display: showComponentA ? 'block' : 'none'}}
  />             
</div>

适用场景：组件A体积不大，无必须卸载的业务逻辑要求。

• 方案2：状态提升到父组件存储（支持组件卸载场景）
  如果业务需要必须卸载组件A，可以把react-select的选中状态提到组件B中存储，通过props同步给组件A，即使组件A卸载，选中值也会保存在父组件中，重新渲染时直接回显：

1. 先在组件B中新增状态存储两个下拉框的选中值：

// Component B 新增逻辑
import { useState } from 'react';

// 组件内部新增状态
const [select1Value, setSelect1Value] = useState(null);
const [select2Value, setSelect2Value] = useState(null);

2. 修改组件B传递给组件A的props，新增选中值和修改方法：

// Component B 渲染逻辑修改
<div>                
{showComponentA ? 
  <ComponentA 
    PropA={propA}
    PropB={propB}
    select1Value={select1Value}
    onSelect1Change={setSelect1Value}
    select2Value={select2Value}
    onSelect2Change={setSelect2Value}
  /> 
: <></>}                
</div>

3. 修改组件A，绑定react-select的value和onChange属性到父组件传入的props：

// Component A 修改后代码
<react-select 
  options={PropA} 
  value={props.select1Value}
  onChange={props.onSelect1Change}
/>
<react-select 
  options={PropA}           
  value={props.select2Value}
  onChange={props.onSelect2Change}
/>

适用场景：组件A体积较大、或者有必须卸载的业务逻辑要求，符合React状态提升的最佳实践。

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