React 中 radio 按钮点击后状态未及时更新，导致 getProductByCategory 获取的是上一次选中的值；根本原因是 onClick 事件触发时 React 状态尚未同步更新，应改用 onChange 并移除冗余状态管理。
react 中 radio 按钮点击后状态未及时更新，导致 `getproductbycategory` 获取的是上一次选中的值；根本原因是 `onclick` 事件触发时 react 状态尚未同步更新，应改用 `onchange` 并移除冗余状态管理。
在 React 表单中， 的交互行为与状态同步密切相关。原代码中使用 onClick + useState 管理选中值，存在典型的 状态滞后（state lag） 问题：用户点击某选项时，setSelected(value) 是异步操作，而紧随其后的 getProductByCategory() 立即执行，此时 selected 仍为旧值 —— 这正是“只响应上一次点击”的根源。
✅ 正确做法是：避免手动维护 radio 选中状态，转而利用原生表单语义，通过 onChange 事件直接捕获当前选中值，并立即传入数据获取逻辑：
React Native For Android 源码编译 中文WORD版
下载
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
✅ 关键修复点
- 替换 onClick → onChange：onChange 在用户真正切换选项后触发，保证值已确定；
- 移除 selected 状态变量：radio 组由 DOM 自身控制选中态，无需额外 state；
- 使用 defaultChecked 初始化“all”选项：确保页面加载时默认选中“All”，符合 UX 需求；
- 将选中值直接作为参数传入请求函数：消除闭包中 stale state 的风险。
? 优化后的核心代码片段
const handleRadioChange = (e) => {
const value = e.target.value;
console.log("Selected:", value);
getProductByCategory(value); // 直接传入最新值
};
const getProductByCategory = async (categorySlug) => {
try {
if (categorySlug === "all") {
const { data } = await axios.get("http://localhost:5000/api/product");
setProducts(data.products);
} else {
const { data } = await axios.get(`http://localhost:5000/api/product/${categorySlug}`);
setProducts(data.products);
}
} catch (error) {
console.error("Failed to fetch products:", error);
}
};
? JSX 中 radio 渲染优化
<div classname="radio-options">
<div classname="flex gap-3">
<input type="radio" id="all" name="category" value="all" onchange="{handleRadioChange}" defaultchecked><label htmlfor="all">All</label>
</div>
{categories?.map((category) => (
<div key="{category._id}" classname="flex gap-3">
<input type="radio" id="{category._id}" name="category" value="{category.slug}" onchange="{handleRadioChange}"><label htmlfor="{category._id}">{category.name}</label>
</div>
))}
</div>
⚠️ 注意事项：
- for 属性应匹配 id（如 htmlFor="all"），而非固定 "category"，否则 label 无法正确关联控件；
- 后端路由 /api/product/${selected} 需确保 selected 是有效 slug；建议增加空值/非法值校验；
- 若需在 UI 中高亮当前选中项（如加粗文字），可保留 selected state，但必须在 onChange 中先更新 state，再调用 API，并配合 useEffect 响应变化（非本例必需，因 UI 仅依赖 DOM 选中态）。
此方案精简、可靠，彻底规避了状态同步时序问题，符合 React 表单最佳实践。
