如何自動更新我的頁面以添加輸入的內容？ 我收到 TypeError

Question

我正在向包含所有食譜的頁面添加食譜。 當我在表單中添加配方時，狀態會正確更新。 但是，我必須刷新所有食譜頁面才能顯示新添加的食譜。 它一直說我的 id 屬性未定義。我將如何修復它以便它會自動更新？

render() { const { recipes } = this.props;

return (
  <div>
    {
      recipes.map(recipe => {
        return (
          <div key={recipe.id}>
            <Link to={`/recipes/${recipe.id}`} key={recipe.id}>
              <h2>{recipe.name}</h2>
            </Link>
            <div>{recipe.cuisine}</div>
            <img src={recipe.imageUrl} />

類型錯誤：無法讀取未定義的屬性“id”

Answer 1

您沒有添加定義的配方對象。 Console.log你的props.recipes ，你會看到，新添加的一個是undefined或null 。 檢查更新食譜列表的功能，並確保將有效的食譜添加到您的列表中。