React JS Axios Response is not populating the array of objects returned by api. 響應返回了 20 個對象

Question

希望你一切順利。 我只是使用 ReactJS，我利用 axios 請求從第三方 API 獲取新聞。現在，API 返回了 20 篇不同的文章。 所以我嘗試使用 map function 到 map 遍歷 20 篇文章並創建 20 張卡片（我創建了一個卡片組件，api 信息將填充到其中）。 文章有20篇，也就是說應該有20張卡片。 但是，只顯示 1 張卡片。 請參閱下面的代碼。 謝謝！

[![// TrumpNews
import React, { useEffect, useState } from "react";
import "./TrumpNews.css";
import CardComponent from "./CardComponent";
import axios from "axios";

const TrumpNews = () => {
  const API_KEY = "0949535b152f400aa2a162ecc055021a";
  const \[news, setNews\] = useState(\[\]);

  console.log(news);

  useEffect(() => {
    var url =
      "http://newsapi.org/v2/everything?" +
      "q=Trump&" +
      "from=2020-11-12&" +
      "sortBy=popularity&" +
      "apiKey=*********";

    axios
      .get(url)
      .then(async (res) => {
        setNews(\[res.data.articles\]);
      })
      .catch((err) => console.log(err));
  }, \[\]);

  return (
    <div className="trumpNews">
      {news.map((item) => (
        <CardComponent item={item} />
      ))}
    </div>
  );
};

export default TrumpNews;


// CardComponent
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";

import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import { red } from "@material-ui/core/colors";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import "./CardComponent.css";

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: "56.25%", // 16:9
  },
  expand: {
    transform: "rotate(0deg)",
    marginLeft: "auto",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest,
    }),
  },
  expandOpen: {
    transform: "rotate(180deg)",
  },
  avatar: {
    backgroundColor: red\[500\],
  },
}));

const CardComponent = ({ item }) => {
  const classes = useStyles();

  console.log(item.author);

  return (
    <Card className={classes.root}>
      <CardHeader
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={item.description}
        subheader="September 14, 2016"
      />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <div>{item\[0\].author}</div>
      {item\[0\].title}
    </Card>
  );
};

export default CardComponent;][1]][1]

Answer 1

設置結果時，您正在創建一個二維數組 -

setNews([res.data.articles]);

articles已經是一個數組，所以你只需要像這樣設置 state -

setNews(res.data.articles);

Answer 2

在您示例的.then方法中，您將數組放入數組中，此處不需要方括號：

setNews(\[res.data.articles\]);

它應該是這樣的：

setNews(res.data.articles);