usestate 鈎子在反應中不起作用

Question

大家好這是我的代碼的樣子

export default function Billing() {
    const classes = useStyles();
    const [balance, setBalance] = useState('0.00');
    const [upcoming, setUpcoming] = useState('0.00');
    const [lastmonth, setLastmonth] = useState('0.00');
    const [header, setHeader] = useState('Please Enter The Amount');
    const [open, setOpen] = useState(false);
    const [amountstate, setAmountstate] = useState(false);
    
    const [amounthelper, setAmounthelper] = useState('');
    const [sairam, setSairam] = useState(0);
    const onchange = async (e) => {
        console.log(sairam) 
        setSairam({amount: e.target.value})
    }
    const [modalchild, setModalchild] = useState(<>
    <form noValidate autoComplete="off">
       <TextField
            error={amountstate}
            type="number"
            value={sairam}
            onChange={onchange}
            label='Please enter the amount'
            helperText={amounthelper}
            variant="outlined"
        />
        <br />
        <br />
        <Button variant="contained" color="primary" onClick={() => addBalance()}>Add Balance</Button>
    </form>
    </>);
    const [country, setCountry] = useState(false);
    const [currency, setCurrency] = useState('');

 const addBalance = () => {
        console.log("Clicked :)")
        console.log(sairam) // outputs the inital value not the changed value

});
    return(<>
    <div className="balance-container">
        <div className="columns-top">
            <div className="column-top">
            <h1>${upcoming}</h1>
            </div>
            <div className="column-top">
            <h1>${balance}</h1>
            <Button variant="contained" color="primary" onClick={handleOpen}>Add Balance</Button>
            </div> 
            <div className="column-top">
            <h1>${lastmonth}</h1>
            </div>

        </div>
    </div>

    <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <div className={classes.paper}>
            <h2 id="transition-modal-title">{header}</h2>
            
            {modalchild}
          </div>
        </Fade>
      </Modal>
     </>
    )
}

if I change the state sairam by using the function setSairam() the state is not getting updated and its only logging the initial state which is 0 i have even tried the loggint the event value of my input it works correct but the state alone is not改變請幫助我隨時給我任何其他選擇

Answer 1

setSairam()是異步方法，因此您無法在setSairam()之后立即獲取sairam的更新值。

const onchange = async (e) => {
    setSairam({amount: e.target.value})
    console.log(sairam) // This will console old value of sairam
}

您應該使用useEffect添加sairam依賴項來檢查更新的 state 值。

useEffect(() => {
   console.log(sairam) 
}, [sairam]);

---

重要的

sairam將是 TextField 的值，因此您應該將 sairam 更新為字符串值，而不是 object。

setSairam(e.target.value)

Answer 2

您不會在onChange function 中獲得更新的值，因為 function 不知道 state 何時更改。

使用 useCallback 獲取sairam的更新值。 在依賴數組中傳遞sairam 。

const onchange = useCallback(async (e) => {
        console.log(sairam) 
        setSairam({amount: e.target.value})
    },[sairam]);

或使用prevState

   setSairam(prevState => {
     console.log(sairam) 
    return ({amount: e.target.value})
  });

另一種選擇是將sairam傳遞給 onChange function。 但我不確定它是如何工作的，因為您的標記存儲在 state

onChange={(e)=>onchange(e, sairam)}


const onchange = async (e, sairam) => {
        console.log(sairam) 
        setSairam({amount: e.target.value})
    }