如何在 React JS 中映射 Strapi API 数据

Question

我正在尝试在我的 React 应用程序中映射来自 Strapi Headerless CMS API 的数据。我一直在失败。当我使用 consoleLog 时，我确实看到了数据。但是当我使用地图功能显示一些输出时，我 return。没有数据显示。我需要帮助。

export default function App() {

  const [Alldata, setAlldata] = useState([]);
  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  console.log(Alldata);


  return (
    <div>{Alldata.map( data => 
      <p >{Alldata.Alldata.data.attributes.Country}</p>
      )}
      
      </div>
  )
}

这就是我的 API 数据的样子。我能够从邮递员那里看到这些数据，这就是我想要映射并将所有项目显示为列表的内容。

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "Description": "Hello Stu",
                "Vendor": "Sony Play Station",
                "VendorId": 20,
                "FaceValue": 50,
                "DefaultCost": 50,
                "ProductCode": 317,
                "Name": 50,
                "ProductCodeAlt": "FLASH-317",
                "ProductTypeEnum": "Wallet Top Up",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i955.png",
                "createdAt": "2022-05-03T12:08:43.718Z",
                "updatedAt": "2022-05-04T09:55:47.328Z",
                "publishedAt": "2022-05-03T12:08:47.100Z"
            }
        },
        {
            "id": 2,
            "attributes": {
                "Description": "R1 - R2500 1Voucher Token",
                "Vendor": "1 Voucher",
                "VendorId": 9,
                "FaceValue": 0,
                "DefaultCost": 0,
                "ProductCode": 311,
                "Name": null,
                "ProductCodeAlt": "FLASH-311",
                "ProductTypeEnum": "Token",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i910.png",
                "createdAt": "2022-05-03T12:29:58.102Z",
                "updatedAt": "2022-05-03T12:30:00.609Z",
                "publishedAt": "2022-05-03T12:30:00.607Z"
            }
        },
        {
            "id": 3,
            "attributes": {
                "Description": "Refund 1Voucher Token",
                "Vendor": "1 Voucher",
                "VendorId": 9,
                "FaceValue": 0,
                "DefaultCost": 0,
                "ProductCode": 392,
                "Name": null,
                "ProductCodeAlt": "FLASH-392",
                "ProductTypeEnum": "Token",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i910.png",
                "createdAt": "2022-05-03T12:33:12.421Z",
                "updatedAt": "2022-05-03T12:33:14.089Z",
                "publishedAt": "2022-05-03T12:33:14.087Z"
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 3
        }
    }
}

Answer 1

AllData状态会是一个对象有data属性也就是数组，然后每个元素都有attributes.Country属性。

示例：

export default function App() {
  const [Alldata, setAlldata] = useState({}); // <-- object

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
  }, []);

  console.log(Alldata);

  return (
    <div>
      {Alldata.data?.map(data => // <-- map Alldata.data, use a null check
        <p>{data.attributes.Country}</p>
      )}
    </div>
  );
}

建议是否要将 Alldata 状态保持为数组。

export default function App() {
  const [Alldata, setAlldata] = useState([]); // <-- array

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then(({ data }) => setAlldata(data)); // <-- save the data array
  }, []);

  console.log(Alldata);

  return (
    <div>
      {Alldata.map(data => // <-- map Alldata array
        <p>{data.attributes.Country}</p>
      )}
    </div>
  );
}