本文介绍如何使用 React 的 useState 和状态提升实现两个联动下拉框：选择颜色后，食物列表自动过滤为仅显示匹配该颜色的食物。
本文介绍如何使用 react 的 `usestate` 和状态提升实现两个联动下拉框：选择颜色后，食物列表自动过滤为仅显示匹配该颜色的食物。
在 React 应用中，组件间的数据联动依赖于状态（state）驱动的重新渲染，而非直接操作 DOM（如 document.getElementById()）。你当前的 Dropdown 组件是无状态的、彼此隔离的，因此无法感知颜色选择的变化。解决方案是：将颜色选择状态提升至父组件（HomePage），再将其作为 prop 传递给食物下拉框，并在内部完成条件过滤。
以下是完整、可运行的实现步骤：
✅ 步骤 1：在 HomePage 中管理颜色状态
使用 useState 存储当前选中的颜色，并通过 onChange 事件实时更新：
Auth0 React
下载
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
// page.js
'use client';
import Dropdown from './data-import';
export default function HomePage() {
const [selectedColor, setSelectedColor] = useState('');
return (
<div>
<Dropdown
type="colors"
value={selectedColor}
onChange={(e) => setSelectedColor(e.target.value)}
/>
<Dropdown
type="food_types"
selectedColor={selectedColor}
/>
</div>
);
}? 注意：value 和 onChange 是原生 <select> 的受控属性，必须成对使用才能让颜色下拉框成为受控组件。
✅ 步骤 2：增强 Dropdown 组件以支持受控模式与过滤逻辑
// data-import.js
'use client';
import foods from '../data/foods.json';
export default function Dropdown({ type, value, onChange, selectedColor }) {
let options = [];
if (type === 'colors') {
options = foods.colors.map((color) => (
<option key={color} value={color}>
{color.charAt(0).toUpperCase() + color.slice(1)}
</option>
));
} else if (type === 'food_types') {
// 过滤：仅保留 color 字段匹配 selectedColor 的食物（若 selectedColor 为空，则显示全部）
const filteredFoods = selectedColor
? Object.entries(foods.food_types).filter(
([_, food]) => food.color === selectedColor
)
: Object.entries(foods.food_types);
options = filteredFoods.map(([name, _]) => (
<option key={name} value={name}>
{name.charAt(0).toUpperCase() + name.slice(1)}
</option>
));
}
return (
<select
value={value || ''}
onChange={onChange}
disabled={!value && type === 'food_types'} // 可选：未选颜色时禁用食物下拉框
>
<option value="">— Select a {type === 'colors' ? 'color' : 'food'} —</option>
{options}
</select>
);
}✅ 关键要点说明：
- 状态提升（Lifting State Up）：父组件统一管理共享状态（selectedColor），子组件只负责展示和触发变更。
- 受控组件原则：<select> 必须绑定 value 并监听 onChange，否则 React 会警告并失去响应性。
- 过滤逻辑放在渲染时：每次 selectedColor 变化，组件重渲染 → filteredFoods 重新计算 → 下拉选项自动更新。
- 空值处理：添加默认提示选项（— Select a ... —），并合理处理 selectedColor 为空时的全量展示逻辑。
- 大小写优化：使用 charAt(0).toUpperCase() 提升用户体验（如显示 “Apple” 而非 “apple”）。
⚠️ 常见错误规避：
- ❌ 不要使用 document.getElementById() 或 window.onload —— 这违背 React 的声明式数据流，且在服务端渲染（SSR）中会报错。
- ❌ 不要在 Dropdown 内部用 useState 管理颜色（会导致两个下拉框状态不一致）。
- ❌ 避免在 map 中直接修改 foods.food_types 对象（它是只读 JSON）；始终基于原始数据做不可变过滤。
通过以上改造，你的应用即可实现“选颜色 → 刷食物”的流畅交互，完全符合 React 的最佳实践。
