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>
     </>
    )
}

如果我通过使用函数 setSairam() 更改状态 sairam，则状态不会更新，并且它仅记录初始状态 0 我什至尝试过 loggint 我输入的事件值它工作正常但状态一个人不会改变请帮助我随时给我任何其他选择

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 依赖项来检查更新的状态值。

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

---

重要

sairam 将是 TextField 的值，因此您应该将 sairam 更新为字符串值，而不是对象。

setSairam(e.target.value)

Answer 2

您不会在 onChange 函数中获得更新的值，因为该函数不知道状态何时更改。

使用 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 函数。但我不确定它是如何工作的，因为您的标记存储在状态中

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


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