您的代码没有问题，只是没有显示recipeName

<>
   {props.diets.map((diet) => (
          <div key={diet.name}>
            <a>{diet.name}</a>
            <a>{diet.category}</a>
            <span>
              {diet.recipes.map((recipe) => (
// i added span so that we can add multiple tags
                <span key={recipe.recipeName}> 

                  <a>{recipe.recipeSize}</a>
                  <a>{recipe.recipeName}</a> 
                </span>
              ))}
            </span>
          </div>
        ))}
      </>

在这里，我利用你的虚拟数据：

{
       recipe.map((item, index) => {
         return (
           <div key={index}>
               <span>{item.category}</span>
               <br />
               <span>{item.name}</span>
               <div>
                {
                  item.recipes.map((r, index) => {
                    return (
                      <>
                        <span key={index} >{r.recipeName}: {r.recipeSize}</span><br />
                      </>
                    )
                  })
                }
               </div>
           </div>
         )
       })
     }

我不知道你为什么要用a标签，除非你要用href标签链接它。
但是我已经在Map中使用了return，它工作的很好。希望，它也能为你工作。