1

Здравствуйте, изучаю react.js для ajax использую пакет axios.
Суть в том что в componentDidMount() я делаю запрос к внешнему api и от туда получаю объект с данными, сейчас в приложение происходит такое:
1) Рендерится пустой объект, а потом заполняется данными с api и повторно рендерится. На скриншоте показано красным первый рендеринг пустого массива, и второй рендеринг уже массива с данными. Я это ссылаю на то что в DidMount изменяя state повторно запускается рендеринг компонента, можно это как то изменить? или придется на сервере делать api запрос и уже потом отдавать его реакту?

P.S И просьба к знатокам если что то в коде я сделал не правильно указать на это:) Только учусь понимать работу реакта:)

2 рендеринга в консоле

import React, {Component} from 'react';
import axios from 'axios';
import './App.css';
const currencyPair = [
    {name: "Все валюты", zip: "All",},
    {name: "Биткоин", zip: "BTC_USD"},
    {name: "Ефериум", zip: "ETH_USD"},
    {name: "Лайткоин", zip: "LTC_USD"}
];
const URL = "https://api.exmo.me/v1/ticker/";
class ExchangeRate extends Component {
    render() {
       let currency = this.props.currency;
       let content;
        console.log(this.props.rate);
        if (currency === "All") {
            content =<span>Вывод курса всех валют <br/> {'BTC_USD' in this.props.rate ? currencyPair.map((place, index) => (

            place.zip !== "All" ? <div key={index}>{place.zip} = {this.props.rate[place.zip].last_trade}</div>: ''

            )) : 'Ошибка ведутся технические работы'}
        </span>
        } else {
            content = <span>Вывод курса по валютной паре {currency}
            - {'BTC_USD' in this.props.rate ? this.props.rate[currency].last_trade : 'Ошибка ведутся технические работы'} </span>
    }
    return (
        <h1>{content}</h1>
    );

    }
}
class App extends Component {
constructor() {
    super();
    this.state = {
        activePlace: 1,
        rate: {}
    };
}
componentDidMount() {
        axios.post(URL)
            .then(function (response) {
                this.setState({
                    rate: response.data
                })
            }.bind(this))
}
render() {
    const activePlace = this.state.activePlace;
    return (
        <div className="App">
            <div className="App-header">
                <span className="App-title">Курс крипто валюты</span>
            </div>
            <div className="App-intro">
                <span>Выберите валютную пару</span>
            </div>
            {currencyPair.map((place, index) => (
                <button
                    key={index}
                    onClick={() => {
                        this.setState({activePlace: index});
                    }}
                >
                    {place.name}
                </button>
            ))}
            <ExchangeRate key={activePlace} currency={currencyPair[activePlace].zip} rate={this.state.rate}/>
        </div>

    );
}
}

export default App;
0

2 ответа 2

1

Рендерится пустой объект, а потом заполняется данными с api и повторно рендерится. На скриншоте показано красным первый рендеринг пустого массива, и второй рендеринг уже массива с данными. Я это ссылаю на то что в DidMount изменяя state повторно запускается рендеринг компонента

У вас всё работает как надо. Рендеринг происходит каждый раз, когда изменяется внутреннее состояние компонента (то есть props (то, что задаётся снаружи) или state (то, что задаётся самим компонентом)). Как только объект rate изменится, ваш компонент перерисуется (причём не только ExchangeRate, но и App, так как в нём вы меняете state).

можно это как то изменить? или придется на сервере делать api запрос и уже потом отдавать его реакту?

А зачем? Почему нельзя обновлять данные на клиенте в рантайме? Ведь ajax вроде как затем и придумали.

По поводу кода - я бы вынес различные компоненты в разные файлы и, если ограничиваться только реактом, функции, связанные с запросом данных - в отдельную службу. Если используете redux, то эти вызовы лучше вынести в action-ы.

1
  • redux не использую, спасибо за советы:) По поводу рендеринга, то он происходит 2 раза подряд то есть загружается приложение и тут же происходит 2 - ой рендеринг, из-за этого если я не предотвращаю ошибки связаные с пустым объектом то приложение начинает крашится. В этом и была суть, хотелось как то избавится от этого и что бы ajax запрос происходил при первом рендеринге :) Я могу запустить сервер что бы проблему потрогать в реальности) 7 апр 2018 в 19:30
1

Для чего делать запрос после того как компонент отрендерился (componentDidMount)? Есть же метод componentWillMount.

Как совет, разделите render на несколько частей:

render() {
    <div>
        {this.staticPart()}
        {this.dymamicPart()}
    <div>
}

Где staticPart - функция возвращающая статичную часть страницы, а dymamicPart - та, которая требует каких то данных с сервера. staticPart у вас неизменна и поэтому может отрендерится сразу, а dymamicPart напишите подобным образом:

function dymamicPart() {
    // проверка пустой ли объект (можно воспользоваться библиотекой lodash: _.isEmpty(...)
    const isEmpty = Object.keys(this.state.rate).length === 0 && this.state.rate.constructor === Object
    if (isEmpty) {
         return null
    }
    return ...
}

Если внутри функции не будет this, то сделайте привязку в constructor() или используйте стрелочные функции

dymamicPart = () => {...}
4
  • Метод componentWillMount лучше не использовать для AJAX-запросов. В будущем от него планируют отказаться. Коротко здесь stackoverflow.com/questions/46043832/… и более подробно тут reactjs.org/blog/2018/03/27/update-on-async-rendering.html По этим соображениям использование componentDidMount является предпочтительным.
    – Dan
    9 апр 2018 в 10:27
  • @Dan согласен, но ведь только в 17 версии 9 апр 2018 в 11:31
  • Там смысл не только в том, что в будущем его выпилят, но и в том, что componentWillMount часто неправильно используется. И по первой ссылке объясняется, почему лучше использовать именно componentDidMount.
    – Dan
    9 апр 2018 в 12:04
  • Понимаю, но то для того чтобы избежать проблем с повторным рендерингом я написал условие: if (isEmpty) { return null }. 9 апр 2018 в 12:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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