J'ai un composant que je souhaite utiliser pour mettre à jour un « solde » dans une base de données.

Pour ce faire, je tire la figure dans mon componentDidMount en utilisant axios.get :

componentDidMount() {
  axios.get("/api/fetch/fetchEditDebt", {
      params: {
        id: this.props.match.params.id
      }
    })
    .then((response) => {
      this.setState({
        balance: response.data.balance,
      })
    })
}

J'ai alors une entrée qui prend le montant que l'utilisateur veut ajouter au solde :

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

J'utilise ensuite une fonction pour prendre le solde d'origine de l'état et le chiffre « ajouter » de l'état d'entrée, et les ajouter ensemble :

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

Et ce chiffre mis à jour est ensuite rendu à l'intérieur d'une étendue afin que l'utilisateur puisse voir le nouveau solde :

<div className="edit-balance-balance-container">
  <p className="edit-balance-balance-paragraph">Updated balance: </p>
  <span className="edit-balance-updated">-£{calculateUpdatedBalance()}</span>
</div>

Tout cela fonctionne très bien et, comme prévu, la difficulté survient lorsque je souhaite ensuite publier le solde mis à jour dans ma base de données. J'ai essayé de publier l'état add, mais sans surprise, cela met simplement à jour le solde au montant que l'utilisateur a mis dans l'entrée.

Alors comment accéder au chiffre généré par ma fonction calculateUpdatedBalance() ? J'ai pensé à essayer de setState() dans la fonction, mais cela produit une erreur "trop ​​de mises à jour d'état".

Quelqu'un a-t-il des suggestions sur la façon dont je peux obtenir ce chiffre mis à jour et le publier dans ma base de données ?

Voici mon composant complet pour référence:

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>
    )
  }
}
2
Jon Nicholson 14 nov. 2020 à 21:20

1 réponse

Meilleure réponse

Si vous faites de calculateUpdatedBalance() une méthode membre du composant Add, vous pouvez l'appeler à la fois depuis render() et 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>
    ...
  }
1
Patrick Roberts 14 nov. 2020 à 19:27