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);