慕后森
2023-08-05 19:24:06
我有一個組件想用它來更新數(shù)據(jù)庫中的“余額”。為此,我使用 axios.get 將圖形拉到我的 componentDidMount 中:componentDidMount() { axios.get("/api/fetch/fetchEditDebt", { params: { id: this.props.match.params.id } }) .then((response) => { this.setState({ balance: response.data.balance, }) })}然后我有一個輸入,它獲取用戶想要添加到余額中的金額:<form method="POST" onSubmit={this.onSubmit}> <input className="edit-balance-input" type="number" name="add" value={this.state.add} onChange={this.onChange} step="1" /> <button className="edit-balance-button" type="submit">Save</button></form>然后,我使用一個函數(shù)從狀態(tài)中獲取原始余額,并從輸入狀態(tài)中獲取“添加”數(shù)字,并將它們加在一起:const calculateUpdatedBalance = () => { return parseInt(this.state.balance) + parseInt(this.state.add)}然后,更新后的數(shù)字將呈現(xiàn)在跨度內(nèi),以便用戶可以看到新的余額:<div className="edit-balance-balance-container"> <p className="edit-balance-balance-paragraph">Updated balance: </p> <span className="edit-balance-updated">-£{calculateUpdatedBalance()}</span></div>這一切都很好,正如預(yù)期的那樣 - 當(dāng)我想將更新后的余額發(fā)布到我的數(shù)據(jù)庫時,困難就來了。我嘗試發(fā)布add狀態(tài),但毫不奇怪,只是將余額更新為用戶輸入的金額。calculateUpdatedBalance()那么如何訪問我的函數(shù)生成的圖形呢?我考慮過在函數(shù)中嘗試setState(),但這會產(chǎn)生“狀態(tài)更新太多”錯誤。有人對如何獲取更新后的數(shù)字并將其發(fā)布到我的數(shù)據(jù)庫有任何建議嗎?
1 回答

萬千封印
TA貢獻(xiàn)1891條經(jīng)驗 獲得超3個贊
如果您創(chuàng)建組件calculateUpdatedBalance()的成員方法Add,則可以從 和 調(diào)用render()它onSubmit():
calculateUpdatedBalance() {
return parseInt(this.state.balance) + parseInt(this.state.add)
}
onSubmit = async (e) => {
...
await axios.post("/api/edit/editDebtBalance", {
balance: this.calculateUpdatedBalance(),
...
};
render() {
return (
...
<span className="edit-balance-updated">-£{this.calculateUpdatedBalance()}</span>
...
}
添加回答
舉報
0/150
提交
取消