从函数中获取图形，并在用户输入输入后将其设置为状态

Question

我有一个组件想用它来更新数据库中的“余额”。

为此，我使用 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>

然后，我使用一个函数从状态中获取原始余额，并从输入状态中获取“添加”数字，并将它们加在一起：

const calculateUpdatedBalance = () => {

  return parseInt(this.state.balance) + parseInt(this.state.add)

}

然后，更新后的数字将呈现在跨度内，以便用户可以看到新的余额：

<div className="edit-balance-balance-container">

  <p className="edit-balance-balance-paragraph">Updated balance: </p>

  <span className="edit-balance-updated">-£{calculateUpdatedBalance()}</span>

</div>

这一切都很好，正如预期的那样 - 当我想将更新后的余额发布到我的数据库时，困难就来了。我尝试发布add状态，但毫不奇怪，只是将余额更新为用户输入的金额。

calculateUpdatedBalance()那么如何访问我的函数生成的图形呢？我考虑过在函数中尝试setState()，但这会产生“状态更新太多”错误。

有人对如何获取更新后的数字并将其发布到我的数据库有任何建议吗？

Answer 1

如果您创建组件calculateUpdatedBalance()的成员方法Add，则可以从 和 调用render()它onSubmit()：&nbsp; calculateUpdatedBalance() {&nbsp; &nbsp; return parseInt(this.state.balance) + parseInt(this.state.add)&nbsp; }&nbsp; onSubmit = async (e) => {&nbsp; &nbsp; ...&nbsp; &nbsp; await axios.post("/api/edit/editDebtBalance", {&nbsp; &nbsp; &nbsp; balance: this.calculateUpdatedBalance(),&nbsp; &nbsp; ...&nbsp; };&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; <span className="edit-balance-updated">-£{this.calculateUpdatedBalance()}</span>&nbsp; &nbsp; ...&nbsp; }