React中按标识符匹配实现关联select下拉框联动更新咨询

你当前代码的核心问题是所有下拉选择框共用同一份状态，不管改哪个选择框，所有绑定了这份状态的下拉框都会同步更新，根本无法实现按关联ID隔离更新的效果。按下面的逻辑改就行：

• 把扁平的单份状态改成键值对映射结构，key就是你用来做关联的ID（即country的identifier、city的city_id），每个key独立存储当前关联组下选中的国家、城市值，不同组的状态完全隔离
• 任意country选择框值变更时，只更新对应关联ID下的国家字段，同时把同ID下存储的城市选中值清空，其余关联ID的所有状态原封不动保留
• 渲染city选择框时，只读取自身city_id对应分组下的国家值，用这个值过滤出对应的城市选项即可，其他分组的国家选择变化完全不会影响当前city框
• 如果你用Redux管理全局状态，逻辑完全一致，不要全量覆盖state.selection下的country、city对象，只更新对应关联ID的字段就行。

import React, { useState } from "react";
import "./styles.css";

const countriesData = [
  {
    name: "Germany",
    states: ["Duesseldorf", "Leinfelden-Echterdingen", "Eschborn"]
  },
  {
    name: "India",
    states: ["Delhi", "Kolkata", "Mumbai", "Bangalore"]
  },
  {
    name: "France",
    states: ["Auvergne", "Bretagne", "Corse", "Centre"]
  }
];

function Form() {
  // 状态用关联ID做key，每个ID独立存自己的选中值
  const [selectionMap, setSelectionMap] = useState({
    "0-0-0-1": { country: "Germany", city: "" },
    "0-0-0-4": { country: "India", city: "" }
  });

  // 国家选择变更：只更新当前关联ID下的数据
  const handleCountryChange = (relatedId, e) => {
    const selectedCountry = e.target.value;
    setSelectionMap(prev => ({
      ...prev,
      [relatedId]: {
        country: selectedCountry,
        city: "" // 国家切换后同组城市重置
      }
    }));
  };

  // 城市选择变更：只更新当前关联ID下的城市值
  const handleCityChange = (relatedId, e) => {
    const selectedCity = e.target.value;
    setSelectionMap(prev => ({
      ...prev,
      [relatedId]: {
        ...prev[relatedId],
        city: selectedCity
      }
    }));
  };

  // 渲染国家选项
  const renderCountryOptions = () => countriesData.map(country => (
    <option key={country.name} value={country.name}>{country.name}</option>
  ));

  // 根据关联ID对应国家，渲染城市选项
  const renderCityOptions = (relatedId) => {
    const currentCountry = selectionMap[relatedId]?.country;
    return countriesData
      .find(item => item.name === currentCountry)
      ?.states.map(city => <option key={city} value={city}>{city}</option>);
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      console.log("提交数据：", selectionMap);
    }}>
      <div className="all">
        <div>
          <p>Countries</p>
          {/* 国家选择框1，identifier=0-0-0-1 */}
          <div className="leftBox">
            Box 1 (关联ID: 0-0-0-1)
            <select 
              value={selectionMap["0-0-0-1"].country} 
              onChange={(e) => handleCountryChange("0-0-0-1", e)}
            >
              {renderCountryOptions()}
            </select>
            <input type="submit" />
          </div>
          {/* 国家选择框2，identifier=0-0-0-4 */}
          <div className="leftBox">
            Box 2 (关联ID: 0-0-0-4)
            <select 
              value={selectionMap["0-0-0-4"].country} 
              onChange={(e) => handleCountryChange("0-0-0-4", e)}
            >
              {renderCountryOptions()}
            </select>
            <input type="submit" />
          </div>
        </div>
        <div>
          <p>cities</p>
          {/* 城市选择框1，city_id=0-0-0-1，关联第一个国家框 */}
          <div className="rightBox">
            Mode (关联ID: 0-0-0-1)
            <select 
              value={selectionMap["0-0-0-1"].city} 
              onChange={(e) => handleCityChange("0-0-0-1", e)}
            >
              {renderCityOptions("0-0-0-1")}
            </select>
          </div>
          {/* 剩下3个城市选择框，city_id=0-0-0-4，关联第二个国家框 */}
          <div className="rightBox">
            Mode (关联ID: 0-0-0-4)
            <select 
              value={selectionMap["0-0-0-4"].city} 
              onChange={(e) => handleCityChange("0-0-0-4", e)}
            >
              {renderCityOptions("0-0-0-4")}
            </select>
          </div>
          <div className="rightBox">
            Mode (关联ID: 0-0-0-4)
            <select 
              value={selectionMap["0-0-0-4"].city} 
              onChange={(e) => handleCityChange("0-0-0-4", e)}
            >
              {renderCityOptions("0-0-0-4")}
            </select>
          </div>
          <div className="rightBox">
            Mode (关联ID: 0-0-0-4)
            <select 
              value={selectionMap["0-0-0-4"].city} 
              onChange={(e) => handleCityChange("0-0-0-4", e)}
            >
              {renderCityOptions("0-0-0-4")}
            </select>
          </div>
        </div>
      </div>
    </form>
  );
}

export default Form;

• 把Redux中selection的状态结构改成和上面代码中selectionMap一致的键值对结构，不要单独存扁平的country、city对象
• country组件dispatch修改动作时，把当前identifier作为参数传入reducer，reducer只更新对应key下的country值，同时清空同key下的city值
• city组件用useSelector取数时，只取自身city_id对应的分组状态即可，其他ID的状态变化不会触发当前组件重渲染，性能也有保障
• 不需要额外加跨组件事件监听或者层层传参，状态天然按关联ID隔离，改一个country只会更新同ID下的所有city选择框，其余city框完全不受影响。

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