时间戳

首页 > 解决方案 > React JS Axios 响应未填充 api 返回的对象数组。响应返回的对象有 20 个

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

问题描述

在此处输入图像描述希望你一切顺利。我只是使用 ReactJS，我利用 axios 请求从第三方 API 获取新闻。现在，API 返回了 20 篇不同的文章。所以我尝试使用 map 函数来映射和迭代 20 篇文章并创建 20 张卡片（我创建了一个卡片组件，api 信息将填充到其中）。有20篇文章，也就是说应该有20张卡片。但是，只有一张卡片显示。请参阅下面的代码。谢谢！

[![// 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]

标签： javascriptreactjsreact-nativeasynchronoussynchronous

解决方案

设置结果时，您正在创建一个二维数组 -

setNews([res.data.articles]);

articles已经是一个数组，所以你只需要像这样设置状态 -

setNews(res.data.articles);

推荐阅读