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

Question

我使用 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

Answer 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>
  )
}

Answer 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