条件 AND 运算符似乎无法正常工作

Question

我想通过单击两个不同的按钮一次保存两个数据

customerInfo

和

itemInvoiceInfo

，一个用于customerInfo，另一个用于itemInvoiceInfo，想法是当这两个文档成功保存在数据库中时，第三个按钮启用（变得可点击）以供用户执行另一个操作，

&&

操作符应该以这样的方式进行：仅当

customerSaved

和

itemsSaved

为真时（即，第三个按钮才会变为活动状态）两者都已成功发布到数据库），但我得到的是，当我保存任何一个文档时，第三个按钮自动变为活动状态，这不是我想要的，看来我的

&&

运算符语法可能是错误的，请问可能是什么问题，谢谢。

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>

)
    
}

Answer 1

你的条件语句的语法很好。问题是条件的逻辑不符合您的意图。当

both

disableEnableBtns

和 

customerSaved 为 false 时，

itemSaved

函数返回禁用按钮。如果其中只有一个是

true

，它将返回一个启用的按钮。

我想你会想要这样的东西：

const disableEnableBtns = () => {
    if (customerSaved === true && itemSaved === true) {
        return <button ...>+ Add</button>
    }
    else {
        return <button ... disabled={buttonDisabled}>+ Add</button>
    }
}

附加建议：使用

buttonDisabled

状态来启用/禁用该按钮。目前，您有

disableEnableBtns

返回启用或禁用的整个 JSX.Element。您只需让函数更改

buttonDisabled

状态即可使代码更具可读性并利用

useState

挂钩。它看起来像这里的东西：

const disableEnableBtns = () => {
    if (customerSaved && itemSaved) {
        setButtonDisabled(true);
    }
    else {
        setButtonDisabled(false);
    }
}

///JSX Code Snippet
return (
    <div className='addInvoice_Date'>
        <div className='invDate'>
            <p>Invoice Date</p>
                <button 
                    type='submit'
                    className='addInvoiceBtn'
                    onClick={handleShowDatePicker}
                    id="addInvoiceBtn" 
                    name="addInvoiceBtn"
                    disabled={buttonDisabled}>
                        + Add
                </button>
        </div>
    </div>
)