本文介绍如何使用 React 的 useState 和组件间状态传递，实现在颜色选择后动态过滤并更新食物下拉列表，确保两个 <select> 组件联动响应用户输入。
本文介绍如何使用 react 的 `usestate` 和组件间状态传递，实现在颜色选择后动态过滤并更新食物下拉列表，确保两个 `
要实现“选中颜色 → 动态过滤食物列表”的交互逻辑，核心在于状态管理与父子组件通信。当前代码中，两个 Dropdown 组件彼此独立、无状态共享，因此无法感知对方的选择变化。React 要求此类响应式更新必须通过 useState 管理状态，并将状态及更新函数向下传递（即“提升状态到共同父组件”）。
以下是完整、可运行的解决方案：
✅ 步骤一：在父组件中声明并管理共享状态
修改 page.js，引入 useState，存储当前选中的颜色，并将其作为 props 传给食物下拉组件：
Auth0 React
下载
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
// app/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={(color) => setSelectedColor(color)}
/>
<Dropdown
type="food_types"
selectedColor={selectedColor}
/>
</div>
);
}⚠️ 注意：需在文件顶部添加 import { useState } from 'react';
✅ 步骤二：增强 Dropdown 组件以支持受控模式与条件过滤
更新 data-import.js，使其支持：
- 颜色下拉框为受控组件（绑定 value + onChange）；
- 食物下拉框根据 selectedColor 动态过滤选项；
// app/data-import.js
'use client';
import foods from '../data/foods.json';
export default function Dropdown({ type, value, onChange, selectedColor }) {
// 颜色下拉：简单渲染所有颜色
if (type === 'colors') {
return (
<select
value={value}
onChange={(e) => onChange(e.target.value)}
>
<option value="">请选择颜色</option>
{foods.colors.map((color) => (
<option key={color} value={color}>{color.charAt(0).toUpperCase() + color.slice(1)}</option>
))}
</select>
);
}
// 食物下拉：仅显示匹配 selectedColor 的食物（若已选颜色）
const filteredFoods = selectedColor
? Object.entries(foods.food_types)
.filter(([, food]) => food.color === selectedColor)
.map(([name]) => name)
: Object.keys(foods.food_types);
return (
<select>
<option value="">请选择食物</option>
{filteredFoods.map((food) => (
<option key={food} value={food}>
{food.charAt(0).toUpperCase() + food.slice(1)}
</option>
))}
</select>
);
}✅ 关键要点说明
- 不要用 document.getElementById 或 window.onload：React 组件应完全基于声明式状态驱动，而非直接操作 DOM。
- 受控组件原则：<select> 的 value 必须由 React state 控制，且 onChange 必须同步更新该 state。
- 过滤逻辑放在渲染层：利用 selectedColor 作为依赖项，在每次渲染时重新计算 filteredFoods，React 会自动触发重绘。
- JSON 数据结构适配：foods.food_types 是对象，需用 Object.entries() 提取键值对，再按 color 字段过滤。
✅ 进阶建议（可选）
- 添加加载状态或空提示（如 selectedColor 存在但无匹配食物时显示“暂无该颜色的食物”）；
- 将过滤逻辑提取为自定义 Hook（如 useFilteredFoods(selectedColor)），提升复用性；
- 使用 useMemo 包裹 filteredFoods 计算，避免不必要的重复遍历（尤其数据量大时）。
通过以上改造，用户选择颜色后，食物下拉列表将实时、精准地只展示对应颜色的食物，完全符合 React 的数据流设计范式。
