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

Question

我有一个组件想用来更新数据库中的 'balance'。

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

然后我使用函数从状态中获取原始余额，并从输入状态中获取 'add' 数字，并将它们相加：

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>

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

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

有没有人对我如何获取更新后的数字有任何建议，并且 post 我的数据库？

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

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

Answer 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>
    ...
  }

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

Get figure from function and set it as state once user types in input

javascript

reactjs

axios

use-state