Блог

У меня есть компонент, который я хочу использовать для обновления «баланса» в базе данных.

Для этого я извлекаю фигуру в моем componentDidMount с помощью axios.get:

 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() в функции, но это приводит к ошибке «слишком много обновлений состояния».

Есть ли у кого-нибудь какие-либо предложения о том, как я могу получить эту обновленную цифру и опубликовать ее в своей базе данных?

Вот мой полный компонент для справки:

 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() метод-член 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>
    ...
  }