本文讲解在 React 中如何通过 && 操作符准确判断多个异步保存状态（如客户信息和商品信息是否均成功提交），从而精确控制第三个按钮的启用逻辑，避免因条件判断错误导致按钮过早激活的问题。
本文讲解在 react 中如何通过 `&&` 操作符准确判断多个异步保存状态（如客户信息和商品信息是否均成功提交），从而精确控制第三个按钮的启用逻辑，避免因条件判断错误导致按钮过早激活的问题。
在 React 表单场景中，常需根据多个异步操作（如两次独立的 API 提交）的完成状态，动态控制后续操作按钮的可用性。本例中，用户需分别点击两个按钮保存 customerInfo 和 itemInvoiceInfo，仅当二者均成功写入数据库后，第三个“+ Add”按钮才应启用。但当前逻辑却在任一保存成功后即启用该按钮——问题根源不在于 && 语法错误，而在于条件判断逻辑与业务目标不匹配。
原始代码中的 disableEnableBtns 函数使用了如下判断：
if (customerSaved === false && itemSaved === false) { /* 启用 disabled */ }
该逻辑仅在两者同时未保存时禁用按钮；一旦任一状态变为 true（如 customerSaved = true, itemSaved = false），条件即为 false，函数直接返回无 disabled 属性的启用按钮，导致提前激活。
✅ 正确逻辑应是：仅当两个状态均为 true 时启用按钮，其余情况一律禁用。推荐写法如下：
const disableEnableBtns = () => {
const isReady = customerSaved && itemSaved; // 简洁、语义清晰的布尔表达式
return (
<button type="submit" classname="addInvoiceBtn" onclick="{handleShowDatePicker}" id="addInvoiceBtn" name="addInvoiceBtn" disabled>
+ Add
</button>
);
};
? 关键优化点：
- 使用
customerSaved && itemSaved直接生成布尔结果，无需冗余比较（如=== true）； - 将
disabled属性绑定为!isReady：isReady为true时按钮可点击，false时禁用，语义直观； - 移除对
buttonDisabled状态变量的依赖（原useState(true)已冗余），避免状态管理混乱。
⚠️ 注意事项：
-
useState初始化的customerSaved和itemSaved均为false，符合初始禁用预期； -
Axios.post的.then()中必须调用setCustomerSaved(true)/setItemsSaved(true)，且确保无异常跳过（.catch中不应重置状态，除非需支持“重试失败项”）； - 若需增强健壮性，可添加加载态（如
isSavingCustomer）防止重复提交，但本例核心是修复条件逻辑。
总结：&& 操作符本身完全正确，问题本质是「何时启用」的业务逻辑被误译为「何时禁用」。始终以正向条件（ready state）驱动 UI 状态，再通过取反控制 disabled，可大幅提升可读性与可维护性。
