时间戳

首页 > 解决方案 > TypeError: Cannot read property 'spirit' of undefined -- 该属性可以在页面刷新时读取

javascript - TypeError: Cannot read property 'spirit' of undefined -- 该属性可以在页面刷新时读取

问题描述

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;

我在顶部定义的所有变量上都获得了未定义的属性。页面重新加载后，它们都会正确加载。它总是在创建并添加到我的数据库中的新鲜项目上。（默恩）

像这样在我的顶层添加项目。

  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],
    }));
  };

当我的表单被提交时，这些函数被触发并且饮料被正确地添加到数据库中。我的表单提交按钮目前没有重定向，但如果有人能帮助我了解如何在第一次渲染页面时定义第一个组件中的道具而不需要刷新页面，我会很高兴。

道具是这样传下来的

          <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

标签： javascriptnode.jsreactjsmongodbexpress

解决方案

错误消息说它无法读取 的属性spirit，undefined这意味着您props.drink似乎未定义。

this.state.drinks最初有什么价值？它可能发生在第一个渲染周期中，此时this.state.drinks仍未定义，因此您正在通过undefined.

您是否尝试在整个组件树中输出道具的实际值？尝试将它们记录到控制台并查看您在组件中收到的实际值是什么

例如，在您的QueryItem-Component 之前let spirit = props.drink.spirit ? (执行此操作：

console.log(props.drink)

看看你得到了什么

推荐阅读