React JS Axios 响应未填充 api 返回的对象数组。响应返回了20个对象

Question

希望你一切顺利。我只是在使用 ReactJS，我利用 axios 请求从第三方获取新闻 API。现在，API 返回了 20 篇不同的文章。所以我尝试使用 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已经是一个数组，所以你只需要这样设置状态即可-

setNews(res.data.articles);

Answer 2

在您示例的 .then 方法中，您将数组放在数组中，此处不需要方括号：

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

它应该是这样的：

setNews(res.data.articles);

React JS Axios 响应未填充 api 返回的对象数组。响应返回了20个对象

React JS Axios Response is not populating the array of objects returned by api. There are 20 objects returned by the response

javascript

reactjs

react-native

asynchronous

synchronous