Réagir dans l'état de mise à jour tardive

Ce que j'essaie de faire est de mettre à jour un tableau en état d'ajout d'une chaîne du nom du bouton L'utilisateur appuyé. L'utilisateur a plusieurs boutons, donc après avoir appuyé sur eux tout ce que je devais être laissé avec un tableau de chaînes en corrélation sur le bouton de l'utilisateur.

Tout d'abord, je donne à l'utilisateur une alerte qui leur dit que la nourriture a été ajoutée puis je tente simplement d'ajouter le nom de cet aliment à la matrice en état. Après quoi je passe ce tableau vers le composant parent pour mettre à jour un tableau similaire là-bas. P>

Le problème que je reçois est que lorsque j'appuie sur l'une des options de nourriture, le tableau en état ne met pas à jour, mais Je reçois la bonne alerte. Lorsque j'essaie une deuxième aliment, la matrice dans les mises à jour de l'état avec la première option que j'ai sélectionnée. À partir de là, à chaque fois que j'essaie d'ajouter un aliment de nourriture la matrice dans les mises à jour de l'état avec les aliments que j'ai sélectionnés avant cela. P>

Je crois que je suis que je me mettais à la mise à jour de l'état de la réaction imminemment. Je sais que les mises à jour de l'état ne sont pas garanties dans la réaction. P>

Désolé pour le long post, merci pour votre temps. P>

import React from "react";
import "./style.scss";
import FoodData from "./foodData.json";

class Food extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      foodData: [],
      addedFoods: []
    };
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    // Build a new array of objects from FoodData
    const newFoodData = FoodData.map(
      ({ name, pic, serving, calories, sugar, protien }, index) => ({
        id: index,
        name,
        pic,
        serving,
        calories,
        sugar,
        protien
      })
    );
    // Assign the new object to state
    this.setState({ foodData: newFoodData });
  }

  handleClick(e) {
    alert("Added " + e.target.name);
    this.setState(
      {
        addedFoods: [...this.state.addedFoods, e.target.name]
      },
      this.props.updateAddedFoods(this.state.addedFoods)
    );
  }

  render() {
    const displayFood = () => {
      let foodItems = []; // Crate an array
      for (let i = 0; i < this.state.foodData.length; i++) {
        foodItems.push(
          // push item to array through the loop
          <div className="food-card" key={i}>
            <img src={require(`${this.state.foodData[i].pic}`)} />
            <ul>
              <li>{this.state.foodData[i].name}</li>
              <li>Serving: {this.state.foodData[i].serving}</li>
              <li>Calories: {this.state.foodData[i].calories}</li>
              <li>Sugar: {this.state.foodData[i].sugar}</li>
              <li>Protien: {this.state.foodData[i].protien}</li>
            </ul>
            <button
              onClick={this.handleClick}
              name={this.state.foodData[i].name}
            >
              Add
            </button>
          </div>
        );
      }
      return foodItems;
    };

    return (
      <div>
        <div className="food-container">
          {!this.state.foodData.length ? <h1>Loading ...</h1> : displayFood()}
        </div>
      </div>
    );
  }
}

export default Food;