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

mDatabase = FirebaseDatabase.getInstance().reference val options: FirebaseRecyclerOptions<BusinessListData> = FirebaseRecyclerOptions.Builder<BusinessListData>() .setQuery(mDatabase, object: SnapshotParser<BusinessListData> { override fun parseSnapshot(snapshot: DataSnapshot): BusinessListData { Log.v("snapshotfire", snapshot.toString()) //returns all snapshot values Log.v("snapshotfire", snapshot.child("purl").toString()) // this returns null Log.v("snapshotfire", snapshot.child("bus_name").getValue().toString()) //this also returns null return BusinessListData(snapshot.child("id").getValue().toString(), snapshot.child("purl").getValue().toString(), snapshot.child("bus_name").getValue().toString(), snapshot.child("category").getValue().toString() ) } }) .build() 是异步方法，因此您无法在 setSairam() 之后立即获取 sairam 的更新值。

setSairam()

您应该使用 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]); 将是 TextField 的值，因此您应该将 sairam 更新为字符串值，而不是对象。

sairam

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

usestate 钩子在反应中不起作用

2 个答案:

重要