Возврат html из fetch () и отображение пользователя

Question

Я делаю вызов API, используя fetch (). Then () ...

Получение ответа с использованием application / json, и я хочу сохранить данные из ответа внутри html-тегов, вернуть их и показать пользователю.

Из API я получаю 25 результатов, но мне нужны только первые 6 (сделано с помощью цикла for).

Что находится внутри console.log () Я хочу показать в коде комментарий "Результат должен быть здесь".

Можно и как это сделать?

Код ниже.

Я хочу использовать его в Stateless / Functional Component, поэтому без обработки состояния.

кстати. Я новичок во всем этом, поэтому, пожалуйста, будьте нежны. Спасибо!

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 находится в очень состоянии и реквизитах управляемых - либо реквизиты передаются компоненту, либо состояние поддерживается одним внутренним компонентом. В вашем примере, не зная больше подробностей, похоже, что единственный вариант здесь - использовать состояние компонента . Это означает, что вы не можете использовать компонент без состояния, как минимум вы бы смотрели на 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 . Вот как это будет выглядеть как компонент Function

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

при использовании реакции, поэтому вам нужно использовать преимущества, которые предоставляет вам реакция, вам следует разделить код и сделать его многократно используемым.

во-вторых: для получения всего нескольких чисел из связанных постов из большого массивавам не нужно делать цикл, вы можете просто объявить переменную и сохранить в ней количество постов, которые вам нужно сохранить

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, потому что он вызывается сразу после вставки компонента в дерево, и вы можете найти дополнительную информацию здесь

и здесь я создам новый компонент, чтобы позже упростить код для обслуживания, если вы захотите что-то изменить позже, и я передам ему данные, полученные из ответа на мой запрос

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