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

我想保存两个数据customerInfo和itemInvoiceInfo，一次一个，方法是单击两个不同的按钮，一个用于customerInfo，另一个用于itempageInfo，方法是当这两个文档成功保存在数据库中时，启用第三个按钮（变为可点击的）对于用户要采取的另一动作，&&运算符应该以这样的方式使第三个按钮仅在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>

)
    
}

字符串

你的条件语句的语法很好。问题是条件语句的逻辑没有遵循你的意图。当 * customerSaved * 和 * itemSaved都为false时，disableEnableBtns函数返回禁用按钮。如果其中只有一个是true，它将返回启用按钮。
我想你会想要这样的东西：

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

字符串
如果你想继续在你的条件中使用false s，你可以这样做：

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

型

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

1条答案

相关问题

热门标签

最新问答