React中&&逻辑与运算符失效求助：双条件按钮启用异常

需求：点击两个独立按钮分别保存customerInfo和itemInvoiceInfo数据，仅当两者都成功存入数据库后，启用第三个按钮执行其他操作。原本期望用&&运算符实现「仅当customerSaved和itemsSaved均为true时激活按钮」，但实际保存任意一个数据后按钮就自动激活，请求排查原因。

附代码：

const Invoice = () => {
    const[itemSaved, setItemsSaved] = useState(false)
    const[customerSaved, setCustomerSaved] = useState(false)
    const [buttonDisabled, setButtonDisabled] = useState(true);

 const saveCustomerInvoiceInfo = (e)=>{
        e.preventDefault()
        Axios.post('http://localhost:3500/customerInvoiceInfo', 
        {customerName, customerAddress, customerPhoneNumber, customerState})
            .then((response) => { 
                alert('TRANSACTION CREATED') 
                setCustomerSaved(true)
               // setButtonDisabled(false)
            }).catch(function (error) {
                console.log(error);
               // setCustomerSaved(false)
                //setButtonDisabled(true)

        });
    }

    const saveItemsInvoiceDetails = (e)=>{
        e.preventDefault()
        Axios.post('http://localhost:3500/itemInvoiceInfo', 
        {productName, costPrice, sellingPrice, unitOfMeasurement, quantity})
            .then((response) => { 
                alert('TRANSACTION CREATED')
                setItemsSaved(true)
               // setButtonDisabled(false)
            }).catch(function (error) {
                console.log(error);
               // setItemsSaved(false)
               // setButtonDisabled(true)

        });
    }

   const disableEnableBtns=()=>{
    if(customerSaved == false && itemSaved == false){
        // const button = document.getElementById('addInvoiceBtn');
        // button.disabled = "disabled"
       
        return  <button type='submit' className='addInvoiceBtn' onClick={handleShowDatePicker} id="addInvoiceBtn" 
        name="addInvoiceBtn" disabled={buttonDisabled}>+ Add</button>
    }else{
        return  <button type='submit' className='addInvoiceBtn' onClick={handleShowDatePicker} id="addInvoiceBtn" 
        name="addInvoiceBtn">+ Add</button>
    }
    
  }

//JSX Code Snippet

return(

        <div className='addInvoice_Date'>
          <div className='invDate'>
            <p>Invoice Date</p>
           {disableEnableBtns()}
          </div>
        </div>

)
    
}

1. 核心逻辑错误：判断条件完全反转 #

你当前的disableEnableBtns函数逻辑是：当两个状态都为false时，返回禁用的按钮；否则返回启用的按钮。这和你「两个都成功（都为true）才启用」的需求完全相反。

正确的逻辑应该是：仅当customerSaved和itemSaved同时为true时，按钮才启用；否则保持禁用。

2. 冗余状态buttonDisabled无需维护 #

不需要单独维护buttonDisabled状态，直接通过customerSaved && itemSaved的取反值来控制按钮的disabled属性即可，简化状态管理。

3. 错误处理缺失：失败时未重置状态 #

当前代码仅在请求成功时将对应状态设为true，但请求失败时没有将状态重置为false，会导致即使保存失败，状态依然保持true，干扰后续逻辑判断。

修复后的代码 #

const Invoice = () => {
    const [itemSaved, setItemsSaved] = useState(false);
    const [customerSaved, setCustomerSaved] = useState(false);

    const saveCustomerInvoiceInfo = (e) => {
        e.preventDefault();
        Axios.post('http://localhost:3500/customerInvoiceInfo', {
            customerName, customerAddress, customerPhoneNumber, customerState
        })
        .then((response) => { 
            alert('客户信息保存成功');
            setCustomerSaved(true);
        })
        .catch(function (error) {
            console.log(error);
            alert('客户信息保存失败');
            setCustomerSaved(false); // 失败时重置状态
        });
    }

    const saveItemsInvoiceDetails = (e) => {
        e.preventDefault();
        Axios.post('http://localhost:3500/itemInvoiceInfo', {
            productName, costPrice, sellingPrice, unitOfMeasurement, quantity
        })
        .then((response) => { 
            alert('商品信息保存成功');
            setItemsSaved(true);
        })
        .catch(function (error) {
            console.log(error);
            alert('商品信息保存失败');
            setItemsSaved(false); // 失败时重置状态
        });
    }

    // 直接在JSX中渲染按钮，无需单独写函数
    return(
        <div className='addInvoice_Date'>
            <div className='invDate'>
                <p>Invoice Date</p>
                <button 
                    type='submit' 
                    className='addInvoiceBtn' 
                    onClick={handleShowDatePicker} 
                    id="addInvoiceBtn" 
                    name="addInvoiceBtn"
                    disabled={!(customerSaved && itemSaved)} // 核心：两个都为true时才启用
                >
                    + Add
                </button>
            </div>
        </div>
    )
}

关键修改说明 #

• 移除了冗余的buttonDisabled状态，直接通过!(customerSaved && itemSaved)控制按钮禁用状态：当两个状态都为true时，!(true && true)等于false，按钮启用；否则为true，按钮禁用。
• 完善了错误处理逻辑，请求失败时将对应状态重置为false，避免无效状态残留。
• 移除了不必要的disableEnableBtns函数，直接在JSX中渲染按钮，简化代码结构。

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