一旦用户输入输入，从函数中获取图形并将其设置为状态答案

【问题标题】：Get figure from function and set it as state once user types in input一旦用户输入输入，从函数中获取图形并将其设置为状态
【发布时间】：2021-02-26 10:05:19
【问题描述】：

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

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

然后这个更新后的图形会在 span 内渲染，这样用户就可以看到新的平衡：

<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()，但这会产生“状态更新过多”的错误。

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

这是我的完整组件供参考：

class Add extends Component {
  constructor(props) {
    super(props)

    this.state = {
      balance: '',
      add: 0,
      updatedBalance: '',
      fetchInProgress: false
    }

    this.onChange = this.onChange.bind(this);
  }

  componentDidMount() {
    this.setState({
      fetchInProgress: true
    })

    axios.get("/api/fetch/fetchEditDebt", {
        params: {
          id: this.props.match.params.id
        }
      })
      .then((response) => {
        this.setState({
          balance: response.data.balance,
          fetchInProgress: false
        })
      })
      .catch((error) => {
        this.setState({
          fetchInProgress: false
        })
        if (error.response) {
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          console.log(error.request);
        } else {
          console.log('Error', error.message);
        }
        console.log(error.config);
      })
  }

  onChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
    console.log(this.state.add)
  }

  onSubmit = async(e) => {
    e.preventDefault();

    console.log(this.props.match.params.id)

    await axios.post("/api/edit/editDebtBalance", {
      balance: this.state.add,
    }, {
      params: {
        id: this.props.match.params.id
      }
    })

    this.props.history.push('/dashboard');
  }

  render() {
    const calculateUpdatedBalance = () => {
      return parseInt(this.state.balance) + parseInt(this.state.add)
    }

    return (
      <section className="edit-balance-section">
        <div className="edit-balance-container">
          <DashboardReturn />
          <div className="edit-balance-content">
            <p className="edit-balance-paragraph">How much would you like to add to your balance?</p>
            <div className="edit-balance-balance-container">
              <p className="edit-balance-balance-paragraph">Current Balance: </p>
              <span className="edit-balance-original">-£{this.state.balance}</span>
            </div>
            <div className="edit-balance-balance-container">
              <p className="edit-balance-balance-paragraph">Updated balance: </p>
              <span className="edit-balance-updated">-£{calculateUpdatedBalance()}</span>
            </div>
            <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>
          </div>
        </div>
      </section>
    )
  }
}

【问题讨论】：

将calculateUpdatedBalance() 设为成员函数，这样您就可以在onSubmit() 和render() 中调用它
你能提供一个代码示例吗？我以前从未写过成员函数。 :-)
事实上，您已经在这个组件中编写了 4：componentDidMount()、onChange()、onSubmit() 和 render()。
谢谢 - 我知道了。我将函数移到渲染上方，然后按照您的建议在提交中调用它。感谢您的帮助！

标签： javascript reactjs axios use-state

【解决方案1】：

如果您将calculateUpdatedBalance() 设为Add 组件的成员方法，那么您可以从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>
    ...
  }

【讨论】：