如何在卡片上从 axios.get 渲染 JSON？答案

【问题标题】：How do I render JSON from axios.get on a card?如何在卡片上从 axios.get 渲染 JSON？
【发布时间】：2020-10-15 09:48:58
【问题描述】：

我可以在控制台中查看来自 api 的数据，但在渲染我在 UI 中接收到的数据时遇到了问题。接下来我该怎么做？

const news = 'http://newsapi.org/v2/top-headlines?country=us'

axios
    .get(news)
    .then(response => {
        const articles = response.data.articles[0].title;
        console.log(articles)
    })
    .catch((error) => {
      console.log(error)
  });

【问题讨论】：

通常您会将其保存到状态并有条件地呈现 UI。响应 JSON 形状是什么？您的渲染代码在哪里？
如何将响应的一部分（例如标题）专门保存在某个状态中？现在我在控制台日志中只有 JSON，我无法在任何地方渲染它@DrewReese
它可以像访问response.data.articles.title 一样简单，但根据名称看来articles 可能是一系列文章，所以类似于response.data.articles[0].title。此时只是普通的对象属性访问。您能否更新您的问题以包含此 JSON 响应对象？
@DrewReese 一旦我添加了 [0].title 或只是 .title 控制台不会显示任何返回。我还更新了我的 axios.get 的代码。
您能否更新您的问题以包含此 JSON 响应对象，以便我们查看其形状？

标签： json reactjs ionic-framework axios render

【解决方案1】：

在反应中：

使用效果在挂载时被调用，调用自定义的data()异步函数来使用axios，用useState将其存储在本地状态中，然后通过渲染器中的状态进行映射

import React, { FC, useEffect, useState } from 'react';
import axios from 'axios';

const NEWS = 'http://newsapi.org/v2/top-headlines?country=us';

const SampleScreen: FC = () => {
  const [news, setNews] = useState([]);
  useEffect(() => {
    const data = async () => {
      try {
        const res = await axios.get(NEWS);
        const { articles } = res.data;
        if (articles) {
          setNews(articles);
        }
      } catch (err) {
        throw new Error(err);
      }
    };
    data();
  }, []);
  return (
    <div>
      {news.map(({ title, content, date }) => {
        return (
          <div key={date}>
            <strong>{title}</strong>
            <p>{content}</p>
          </div>
        );
      })}
    </div>
  );
};

export default SampleScreen;

【讨论】：