Question

免责声明：我是一位尝试学习更多javascript的设计师。对我好一点。

我正在创建一个站点，该站点从reddit api获取并呈现帖子，并以CSS网格/报纸样式布局显示数据。类似于边缘。到目前为止，这是我的代码：

const url = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"

fetch(url)
    .then(res => res.json())
    .then(res => res.data.children)
    .then(res => res.map(post => ({
        author: post.data.author,
        link: post.data.url,
        img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
        // img: post.data.thumbnail,
        title: post.data.title
    })))
    .then(res => res.map(render))
    .then(res => console.log(res))

// fetch(url)
//     .then(response => response.json())
//     .then(response => {
//         console.log(response.data.children[1].data.preview.images[0].resolutions[1].url);
//     });


const app = document.querySelector('#app');

const render = post => {
    //console.log(post.data);
    const node = document.createElement('div');
    node.innerHTML = `
    <h2>
      <a href="${post.link}">
        <img src="${post.img}" />
        ${post.title}
      </a>
    </h2>`;
    app.appendChild(node);
}

所以这很好，但是我应该有更有效/更有效的方式吗？我的问题是：

对于单个渲染帖子的标记，我实际上没有任何控制权。我可以使用CSS和nth-child分别设置帖子的样式，但这似乎效率很低。
它似乎表现不佳。页面加载后1或2秒钟内html呈现，导致黑屏闪烁。

谷歌搜索与获取api / rendering json有关的所有内容都会产生与react / vue / angular / insertJSLibraryHere相关的结果。

我是否应该实际使用这些框架之一？如果我刚刚学会了如何使用React会更容易/更有效？我一直在避免学习React / Vue，因为我发现很难缠住头，但这也许是一个不错的起点吗？

当每个搜索结果都与某个JS框架相关时，很难找到答案。因此，我为什么要在这里问。

Answer 1

React中的基本提取示例。

将来自api调用的响应保存在componentWillMount生命周期方法的状态数组中是一种更好的做法。另外，我想使用axios代替提取。

这里是一个例子：

[{
  "id": "1",
  "name": "TEST",
  "desc": "",
  "descData": null,
  "closed": false,
  "idOrganization": "1",
  "cards": [
    {
      "id": "1"
    },
    {
      "id": "2"
    },
    {
      "id": "3"
    },
    {
      "id": "4"
    }
  ]
}]

希望它能对您有所帮助。

从Reddit / REST API中获取和呈现数据

1 个答案: