如何实现select标签刷新后以localStorage存储值为初始选中项

• GraphQL Query 组件在loading状态时返回null，此时select下没有任何option节点，你直接给select绑定localStorage.getItem('symbol')作为值，浏览器找不到匹配的option，会自动将选中值重置为后续渲染出的第一个option。
• 组件state中currency初始值硬编码为USD，没有在初始化阶段读取localStorage的存储值，select的受控逻辑和直接读localStorage的非受控写法混用，状态不同步。
• 列表渲染option时用nanoid()生成随机key，每次render都会生成全新key导致option节点被销毁重建，会触发选中值重置。
• 没有做存储值合法性校验，如果localStorage存的货币值不在接口返回的货币列表里，也会导致选中值 fallback 到第一个option。

1. 组件constructor初始化阶段，优先从localStorage读取已存储的货币、购物车数据作为state初始值，设置USD和空数组作为兜底值。
2. select改为标准受控组件，value绑定state中的currency字段，不要直接读取localStorage。
3. Query加载状态不要返回null，渲染一个匹配当前state值的临时加载option，避免select找不到匹配值自动重置。
4. option的key改用货币本身唯一的label字段，不要用随机生成的nanoid，减少不必要的节点重渲染。
5. 接口返回货币列表后做合法性校验，如果存储的货币值不在返回列表中，自动重置为第一个可用货币，避免无效值。

constructor 部分修改 #

constructor(props) {
  super(props);
  // 初始化优先读取localStorage存储值
  const savedCurrency = localStorage.getItem('symbol') || 'USD';
  const savedCartItems = localStorage.getItem('cartItems') 
    ? JSON.parse(localStorage.getItem('cartItems')) 
    : [];
  this.state = {
    currency: savedCurrency,
    cartItems: savedCartItems,
    itemInCart: false,
  };
}

select 部分修改 #

<select id="currency" onChange={this.onChange} value={this.state.currency}> 
  <Query query={GET_CURRENCIES}>
    { ({ loading, data }) => {
      // 加载状态渲染临时option，避免select无匹配值自动重置
      if (loading) return <option value={this.state.currency}>加载中...</option>;
      const currencyList = data.currencies;
      // 校验存储的货币值是否在可用列表中
      const isCurrencyValid = currencyList.some(item => item.label === this.state.currency);
      // 无效值自动重置为第一个可用货币
      if (!isCurrencyValid && currencyList.length > 0) {
        const defaultCurrency = currencyList[0].label;
        setTimeout(() => {
          localStorage.setItem('symbol', defaultCurrency);
          this.setState({ currency: defaultCurrency });
        }, 0);
      }
      return currencyList.map((currency) => (
        <option
          key={currency.label}
          value={currency.label}
        >
          {`${currency.symbol} ${currency.label}`}
        </option>
      ));
    }}
  </Query>
</select>

原有onChange方法逻辑不需要修改，保持原有存储+setState的逻辑即可。修改后刷新页面会优先读取localStorage存储的货币值作为选中项，购物车数据也会在刷新后保留。

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