TypeError: Невозможно прочитать свойство 'spirit' из undefined - свойство может быть прочитано при обновлении страницы

Question

const QueueItem = (props) => {
  let spirit = props.drink.spirit ? (
    <div>
      {props.drink.spiritquantity} | {props.drink.spirit}
    </div>
  ) : (
    <div> No Spirit </div>
  );

  let liqueur = props.drink.liqueur ? (
    <div>
      {props.drink.liqueurquantity} | {props.drink.liqueur}
    </div>
  ) : (
    <div> No Liqueur </div>
  );

  let mixer = props.drink.mixer ? (
    <div>
      {props.drink.mixerquantity} | {props.drink.mixer}
    </div>
  ) : (
    <div> No Mixer </div>
  );

  let cocktail = props.drink.cocktail ? (
    <div>
      {props.drink.user[0].name}
      <div>{props.drink.cocktail}</div>
    </div>
  ) : (
    <div>
      {" "}
      {props.drink.user[0].name}
      <div>{spirit}</div>
      <div>{mixer}</div>
      <div>{liqueur}</div>
    </div>
  );
  let logged = (
    <div>
      <Button
        variant="warning"
        onClick={() => props.handleDeleteDrink(props.drink._id)}
      >
        Remove From Queue
      </Button>{" "}
    </div>
  );

  if (props.user.email === "admin@gmail.com") {
    return (
      <div className="drink-item">
        <div>{cocktail}</div>
        <div>{logged}</div>
      </div>
    );
  } else if (props.user) {
    let logged =
      props.user._id === props.drink.user[0]._id ? (
        <div>
          <Button
            variant="warning"
            onClick={() => props.handleDeleteDrink(props.drink._id)}
          >
            Remove From Queue
          </Button>{" "}
        </div>
      ) : (
        <input type="hidden" />
      );
    return (
      <div className="drink-item">
        <div>{cocktail}</div>
        <div>{logged}</div>
      </div>
    );
  } else {
    return (
      <div className="drink-item">
        <div>{cocktail}</div>
      </div>
    );
  }
};

export default QueueItem;

Я получаю свойство undefined для всех переменных, определенных вверху. При перезагрузке страницы все они загружаются правильно. Он всегда находится на элементе fre sh, который создается и добавляется в мою БД. (MERN)

Элементы добавляются на моем верхнем уровне следующим образом.

  handleSubmit = (e) => {
    e.preventDefault();
    this.handleAddDrink(this.state.drinkInfo);
    console.log("HANDLE SUBMIT", this.state.drinkInfo);
  };


  handleAddDrink = async (drinkIngredients) => {
    console.log(`DRINK WILL BE ${drinkIngredients}`);
    drinkIngredients.user = userService.getUser();
    const newDrink = await drinkService.create(drinkIngredients);
    this.setState((state) => ({
      drinks: [...state.drinks, newDrink],
    }));
  };

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

Опоры передаются вот так

          <Route
            exact
            path="/queue"
            render={({ history }) => (
              <QueuePage
                queue={this.state.queue}
                drinks={this.state.drinks}
                handleDeleteDrink={this.handleDeleteDrink}
                handleNewDrinkClick={this.handleNewDrinkClick}
                handleLogout={this.handleLogout}
                user={this.state.user}
                history={history}
              />
            )}
          />

const QueuePage = (props) => (
  <div className="QueuePage">
    <NavBar user={props.user} handleLogout={props.handleLogout} />
    <div className="queue">
      <QueueList
        queue={props.queue}
        drinks={props.drinks}
        handleDeleteDrink={props.handleDeleteDrink}
        user={props.user}
      />
    </div>
  </div>
);

 return (
    <div className="QueueList">
      <h1 className="queue-title">Drink Queue</h1>
      <div className="drink-list">
        {props.drinks.map((drink) => (
          <QueueItem
            drink={drink}
            handleDeleteDrink={props.handleDeleteDrink}
            user={props.user}
          />
        ))}
      </div>
    </div>
  );

репо: github.com/tshuldberg/coastr

Answer 1

В сообщении об ошибке говорится, что он не может прочитать свойство spirit из undefined, что означает, что ваш props.drink кажется неопределенным.

Какое значение изначально имеет this.state.drinks? Это может произойти во время первого цикла рендеринга, когда this.state.drinks все еще не определен, и поэтому вы проходите через undefined.

Вы пытались вывести фактические значения ваших реквизитов по всему дереву компонентов? Попробуйте зарегистрировать их на консоли и посмотрите, какие фактические значения вы получаете в своих компонентах

Например, в вашем QueryItem -Компоненте до let spirit = props.drink.spirit ? ( сделайте следующее:

console.log(props.drink)

чтобы увидеть, что у вас там