0

Пытаюсь сделать: При нажатии на кнопку, отправлялся запрос (имитировал с помощью setTimeout), и пока ожидается ответ появлялось слово "Загрузка". После соответственно вместо загрузки появляется результат запроса, в моем случае просто текст, обновляю через state. Реализую это через компоненты высшего порядка. Вот код:

import React, { Component } from 'react';
import { BrowserRouter as Router, Link} from 'react-router-dom';

class Btn extends Component {
  render() {
    return (
      <button onClick = {this.props.onClick}>Загрузить данные</button>
    )
  }
}

const HocText = (props)=> ({
  render: () => (
    <p {...props}></p>
  );
});

class Lesson extends Component {
  state = {
    data: '',
  }

  updateData = () => (
    window.setTimeout(() => (this.setState({ data: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. '})), 3000);
  );

  render() {
    return (
      <div>
        <Btn onClick={this.updateData} />
        <HocText to='home'>{this.state.data}</HocText>
      </div>
    );
  }
}

export default Lesson

Сам state обновляется, тем не менее компонент HocText нет. С чем это может быть связано?

3
  • 1
    1. В HocText какая-то муть. Почему функция возвращает объект? 2. Сделай запускаемый пример.
    – Qwertiy
    9 янв 2019 в 14:59
  • @Qwertiy все запускается, делал по примеру 9 янв 2019 в 15:30
  • 1. При том, что тебе вместе с форматированием точки с запятой в неположенных местах удалили - нет. 2. Запускаемый сниппет - это такой, который работает.
    – Qwertiy
    9 янв 2019 в 15:35

1 ответ 1

0

Как-то так:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    data: '',
    loading: false,
  };

  load = () => {
    this.setState({ loading: true })
    window.setTimeout(() => this.setState({ data: 'Lorem ipsum dolor sit amet', loading: false }), 5000)
  }

  render() {
    return (
      <div>
        <button onClick={this.load}>Load data</button>
        {this.state.loading ? <p>Loading...</p> : this.state.data ? <p>{this.state.data}</p> : false}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

UPD. Обновление после комментария, добавление HOC(High order component). По примеру автора вопроса.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Btn extends Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Load data</button>
    )
  }
}

const HocText = (props) => {
  return (
    <h1 {...props}></h1>
  );
}

class App extends Component {
  state = {
    data: '',
    loading: false,
  };

  load = () => {
    this.setState({ loading: true })
    window.setTimeout(() => this.setState({ data: 'Lorem ipsum dolor sit amet', loading: false }), 5000)
  }

  render() {
    return (
      <div>
        <Btn onClick={this.load} />
        {this.state.loading ? <HocText title="Loading...">Loading...</HocText> : this.state.data ? <HocText title={this.state.data}>{this.state.data}</HocText> : false}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

4
  • Ну и где тут HOC?
    – Qwertiy
    9 янв 2019 в 15:37
  • @Qwertiy, Верно подметили, здесь нет компонента высшего порядка. Я предоставил один из возможных вариантов реализации задачи т.е. Выводить Loading... если идёт загрузка данных.
    – meine
    9 янв 2019 в 15:41
  • 2
    Но вопрос-то про hoc.
    – Qwertiy
    9 янв 2019 в 15:42
  • Смысл делать ответ который не отвечает на конкретно заданный вопрос? Минус 9 янв 2019 в 17:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.