时间戳

首页 > 解决方案 > 如何正确映射项目

javascript - 如何正确映射项目

问题描述

我正在尝试进行 API 调用，然后显示来自 API 调用的信息。由于某种原因，即使存储了数据，它也不会显示在页面上。

在 APP.js 中，我的{results.length != 0 && <Recipe items={results} />}结果是一个充满配方信息的数组。然后我进行 API 调用并使用 setResults 将结果存储在结果状态变量中。这是我的食谱组件的代码

import Nutrients from "./Nutrients";
const Recipe = ({ items }) => {
  return (
    <div>
      Items should be mapped
      {items &&
        items.map((item) => {
          const { id, title, image, nutrition } = item;
          console.log("id " + id);
          const { nutrients } = nutrition;
          console.log(nutrients);
          <p>map</p>;
        })}
    </div>
  );
};
export default Recipe;

我的配方组件显示“项目应该被映射”，但它不显示项目的映射。知道为什么吗？

标签： javascriptreactjs

解决方案

使用时map()，必须返回一个值：

{items &&
  items.map((item, index) => {
    const { id, title, image, nutrition } = item;
    console.log("id " + id);
    const { nutrients } = nutrition;
    console.log(nutrients);
    return <p key={index}>map</p>; // <---- HERE
  })
}

进行此更改后，它对我有用

推荐阅读