从 fetch() 返回 html 并显示给用户

Posted 2023-02-22

【中文标题】从 fetch() 返回 html 并显示给用户

【英文标题】：Returning html from fetch() and showing in to user

【发布时间】：2019-08-28 16:01:52

【问题描述】：

我使用 fetch().then() 进行 API 调用 ...

使用 application/json 获取响应，我想将响应中的数据保存在 html 标记内，返回并显示给用户。

从 API 我得到 25 个结果，但我只想要前 6 个（通过使用 for 循环实现）。

console.log() 里面是什么我想在代码中显示注释“结果应该在这里”。

我可以以及如何实现它吗？

代码如下。

我想在无状态/功能组件中使用它，所以不处理状态。

顺便说一句。我是所有这一切的新手，所以请温柔。谢谢！

const Related = props => 
  const url = `/artist/$props.artistId/related`;

  const getRelatedArtists = () => 
    fetch(url)
      .then(res => res.json())
      .then(res => 
        var artist, name, numFans, img;
        for (let i = 0; i < 6; i++) 
          artist = res.data[i];
          name = artist.name;
          numFans = artist.nb_fan;
          img = artist.picture;
          console.log(`
            <div>
              <p>Name: $name</p>
              <p>Fans: $numFans</p>
              <img src=$img alt=$name />
            </div>
          `);
        
      )
      .catch(err => console.log(err));
  ;

  return (
    <div>
      <p>Related artists</p>
      <button onClick=getRelatedArtists>get</button>
      /* Result should be here */
    </div>
  );
;

我想要的结果是这样的：https://imgur.com/40dUyiw

【问题讨论】：

In React, how to show data from API in a HTML table?的可能重复

@Sunil 感谢例如，但我想在没有状态的情况下使用它。如果可能的话（？）

您必须使用状态或存储。如果您正在使用功能组件，那么您可以向 reducer 发送一个操作来更新您的商店（当您的 API 调用完成时）。商店更新将使用新数据重新渲染 UI。在较新版本的 react 中，您可以通过 react hooks 来实现相同的内部无状态组件。

@Sunil 是的，我会尝试使用钩子

【参考方案1】：

React 是非常 state 和 props 驱动的 - 要么 props 被 传递 到组件，要么状态被 维护由一个内部。在您的示例中，在不了解更多细节的情况下，您唯一的选择似乎是利用component state。这意味着您不能使用无状态组件，至少您会看到 PureComponent 或 Component 即

import React,  PureComponent  from 'react';

class Related extends PureComponent 
  state = 
    artists: null,
    error: null
  

  constructor(props) 
    this.super();
    this.url = `/artist/$props.artistId/related`;
  

  getRelatedArtists = async () => 
    try 
      const res = await fetch(this.url);
      const json = await res.json();
      this.setState( artists: json.data, error: null );
     catch(e) 
      console.error(e);
      this.setState( error: 'Unable to fetch artists' );
    
  

  renderError() 
    if (!this.state.error) return null;

    return (
      <span className="error">this.state.error</span>
    )
  

  renderArtistList() 
    if (!this.state.artists) return null;

    return this.state.artists.map((x,i) => (
      <div key=i>
        <p>Name: $x.name</p>
        <p>Fans: $x.nb_fans</p>
        <img src=$x.picture alt=$name />
      </div>
    ));
  

  render() 
    return (
      <div>
        <p>Related artists</p>
        <button onClick=this.getRelatedArtists>get</button> this.renderError()
        this.renderArtistList()
      </div>
    );
  

如果您使用的是 React 16.x，那么您或许应该考虑使用 Hooks。这是函数组件的外观

import React,  useState, useCallback  from 'react';

function Related(props) 
  // setup state
  const [artists, setArtists] = useState(null);
  const [error, setError] = useState(null);
  // setup click handler
  const getRelatedArtists = useCallback(async () => 
   try 
      // fetch data from API
      const res = await fetch(`/artist/$props.artistId/related`);
      const json = await res.json();
      // set state
      setArtists(json.data);
      setError(null);
     catch(e) 
      console.error(e);
      setError('Unable to fetch artists');
    
  , [props.artistId]);
  // setup render helper
  function renderArtist(artist, key) 
    return (
      <div key=key>
        <p>Name: $artist.name</p>
        <p>Fans: $artist.nb_fans</p>
        <img src=$artist.picture alt=$artist.name />
      </div>
    );
  
  // render component
  return (
    <div>
      <p>Related artists</p>
      <button onClick=getRelatedArtists>get</button> error
      artists && artists.map(renderArtist)
    </div>
  )

【讨论】：

嘿@James，感谢您的帮助。我将此代码包含在 React 钩子中并得到错误：未捕获的 TypeError：artist.map 不是函数。现在怎么办？你能给我解释一下吗？

@Zrna 来自服务器的响应是什么样的？我假设您收到的是 JSON 列表，但看起来不像。

@Zrna 好吧，可以看到有效负载不是我所期望的，看起来你有一个分页响应。我已经更新以适应。

伙计，你是我的救星。 这行得通。非常感谢！

【参考方案2】：

在使用 react 时，您需要利用 react 为您提供的优势，您应该拆分代码并使其可重用。

其次：为了从一个大数组中的相关帖子中获取几个数字，您不需要创建一个循环，您只需声明一个变量并将您需要存储在其中的帖子数存储在其中

import React, Component from 'react';
import Post from './post/post'

class RelatedPosts extends Component
    state = 
        realted: [],
    
    componentDidMount()
        const url = `/artist/$props.artistId/related`;
        fetch(url)
            .then(response=>
                const relatedPosts = response.data.slice(0 ,4),
                    latestRelatedPosts = relatedPosts.map(post=>
                        return 
                            post
                        
                    )
                ;
                this.setState(
                    realted: latestRelatedPosts
                );
            ).catch(error=>
                console.log(error)
            )
    
    render() 
        let relatedPosts = this.state.realted.map(realtedPost=>
            return (
                <Post post=realtedPost/>
            );
        );
        return (
            <section className="Posts">
                <p>Related artists</p>
                relatedPosts
            </section>
        );
    

export default RelatedPosts;

这里我在componentDidMount Lifecycle中创建了请求，因为它在组件插入树后立即调用，您可以找到更多信息here

如果您以后想更改任何内容，我将在这里创建一个新组件来简化代码以进行维护，我会将来自我的请求响应的数据传递给它

import React from 'react';
const post = (props) => (
    <article className="relatedPost">
        <h1>Name: props.post.Name</h1>
        <h1>Fans: props.post.numFans</h1>
        <img src=img alt=name />
    </article>
);
export default post