React中如何根据选中的州筛选城市？需修改handleChange逻辑

原代码的问题分析 #

• 两个下拉框共用同一个handleChange，无法区分是选择州还是选择城市的操作，逻辑混乱
• 查找对应州的逻辑错误：statesAndCities.find((state) => state === e.target.value)中，state是数组内的对象，而e.target.value是字符串，对象与字符串无法直接相等匹配，导致永远找不到对应州的城市数据
• 第二个城市下拉框的渲染逻辑错误，没有根据选中的州过滤城市，而是直接遍历所有州的城市列表

修正后的逻辑与代码 #

我们需要拆分事件处理函数，修正州的匹配逻辑，并让城市下拉框根据选中的州动态渲染选项：

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

export default function App() {
  const statesAndCities = [
    { state: "Telangana", cities: ["Hyderabad", "Warangal"] },
    { state: "Madhya Pradesh", cities: ["Gwalior", "Bhopal"] },
    { state: "Rajasthan", cities: ["Jaipur", "Jaipur City"] },
    { state: "Chattisgarh", cities: ["Raipur", "ABC"] }
  ];
  // 初始选中的州设为空字符串，也可默认选中第一个州
  const [selectedState, setSelectedState] = useState("");
  // 初始城市列表为空数组
  const [citiesList, setCitiesList] = useState([]);
  // 记录选中的城市（按需保留）
  const [selectedCity, setSelectedCity] = useState("");

  // 处理州选择的变化
  const handleStateChange = (e) => {
    const selected = e.target.value;
    setSelectedState(selected);
    // 通过对象的state属性匹配选中的州，取出对应城市数组
    const matchedState = statesAndCities.find(item => item.state === selected);
    // 找到匹配项则更新城市列表，否则设为空数组
    setCitiesList(matchedState ? matchedState.cities : []);
    // 切换州时重置选中的城市，避免数据不匹配
    setSelectedCity("");
  };

  // 处理城市选择的变化（按需保留）
  const handleCityChange = (e) => {
    setSelectedCity(e.target.value);
  };

  return (
    <div className="App">
      <select value={selectedState} onChange={handleStateChange}>
        <option value="">请选择州</option>
        {statesAndCities.map((elem) => (
          <option key={elem.state} value={elem.state}>{elem.state}</option>
        ))}
      </select>
      {/* 未选中州时禁用城市下拉框，提升体验 */}
      <select 
        value={selectedCity} 
        onChange={handleCityChange}
        disabled={!selectedState}
      >
        <option value="">请选择城市</option>
        {citiesList.map((city) => (
          <option key={city} value={city}>{city}</option>
        ))}
      </select>
    </div>
  );
}

关键逻辑说明 #

1. handleStateChange核心逻辑：

   • 获取选中的州名称并更新状态
   • 通过item.state === selected的对比，正确匹配到目标州的对象
   • 将匹配州的城市数组赋值给citiesList，供城市下拉框渲染使用
   • 切换州时重置选中的城市，避免出现城市与州不匹配的异常情况

2. 城市下拉框优化：

   • 根据citiesList动态渲染对应城市选项，不再遍历所有州的城市
   • 增加disabled属性，未选中州时禁用下拉框，避免无效操作
   • 给列表项添加key属性，符合React列表渲染规范

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