Как я могу избежать использования ref для рендера loader - PullRequest
Новая
       19

Как я могу избежать использования ref для рендера loader

0 голосов
/ 07 июня 2019

Я бы хотел отобразить спиннер загрузчика, пока я получаю данные с сервера.Я достиг этого, но я знаю, что это не лучший способ из-за использования «ref».Как я могу избежать использования «ref» в этом случае.Я хотел бы сделать спиннер и в других компонентах.В компоненте поиска у меня есть вход с кнопкой отправки, чтобы передать inputValue в функцию getQuery в App.js 

import React, { Component } from "react";
import Search from "./components/Search";
import RecipesList from "./components/RecipesList";
import Recipe from "./components/Recipe";
import Constansts from "./components/constants";
import axios from "axios";
class App extends Component {
  state = {
    recipesList: [],
    isLoading: false,
    itemId: "",
    recipe: "",
    ingredients: ""
  };

  getQuery = async query => {
    const { key } = Constansts;
    const URL = `https://www.food2fork.com/api/search?key=${key}&q=${query}`;

    if (query) {
      console.log();
      this.renderLoader();
      try {
        var res = await axios(URL);
        this.setState({
          recipesList: res.data.recipes,
          isLoading: true
        });
        console.log(this.state.isLoading);
        if (this.state.recipesList.length) {
          this.setState({
            isLoading: false
          });
          console.log(this.state.isLoading);
          this.removeLoader();
        }
      } catch (error) {
        console.log(error);
      }
    }
  };
  renderLoader() {
    const recipesRef = this.refs.recipesRef;
    const mark = `<div class="loader">
                    <svg viewBox="0 0 20 20">
                        <path d="M19.315 10h-2.372v-0.205c-0.108-4.434-3.724-7.996-8.169-7.996-4.515 0-8.174 3.672-8.174 8.201s3.659 8.199 8.174 8.199c1.898 0 3.645-0.65 5.033-1.738l-1.406-1.504c-1.016 0.748-2.27 1.193-3.627 1.193-3.386 0-6.131-2.754-6.131-6.15s2.745-6.15 6.131-6.15c3.317 0 6.018 2.643 6.125 5.945v0.205h-2.672l3.494 3.894 3.594-3.894z"></path>
                    </svg>
                  </div>`;
    recipesRef.insertAdjacentHTML("afterbegin", mark);
  }
  removeLoader() {
    const recipesRef = this.refs.recipesRef;
    recipesRef.removeChild(recipesRef.childNodes[0]);
  }

  render() {
    const { isLoading, recipesList, ingredients, recipe } = this.state;

    return (
      <div className="App">
        <div className="wrapper">
          <Search query={this.getQuery} />
          <div className="recipesWrapper" ref="recipesRef">
            <RecipesList isLoading={isLoading} recipesList={recipesList} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 07 июня 2019

Похоже, реагирует на паттерн.

Реакция (представление) должна управляться данными (состояние / реквизиты).В общем, вы не должны ничего «визуализировать» (манипулировать настоящим DOM) в обработчиках событий.Обработчики / замыкания должны приводить к изменению состояния (setState), заставляя реагировать на повторное отображение компонента.Простейший пример счетчика демонстрирует, что!

var res = await axios(URL); this.setState({ recipesList: res.data.recipes, isLoading: true });

isLoading должен быть установлен перед вызовом axios - чтобы иметь шанс рендеринга <Loading/>.

Вы можете просто отобразить загрузку вместо списка, используя троичный оператор: 

{ isLoading ? 
   <Loading />
   : <RecipesList recipesList={recipesList} />
}

Читайте целые документы, более полные учебные пособия - не минимально необходимые фрагменты!На самом деле стоит знать, что возможно и как это сделать.

...