Реакция - вызов Axios делает слишком много запросов - PullRequest
Новая
       16

Реакция - вызов Axios делает слишком много запросов

0 голосов
/ 26 сентября 2019

Я изучаю React & Redux, создав игровой проект.Я хочу получить данные (атрибуты) через API, но это вызывает слишком много запросов.Полагаю, это может быть реализовано для размещения вызова axios непосредственно в компоненте реагирования, но я понятия не имею, как это исправить.

function Attributes({ attributes, dispatch }) {
  axios.get(`/api/heroes/1/get-attributes`).then(res => {
    dispatch(AttribAction.set(objectToArray(res.data)));
  });

  return (
    <div className="content">
      {attributes.map((attrib, index) => (
        <div
          key={index}
          className={attrib.id == null ? "attrib-block empty" : "attrib-block"}
        >
          <p>
            <strong>{attrib.name}</strong>: {attrib.value}
          </p>
          <div>
            <button
              className="attrib-button"
              onClick={() => dispatch(AttribAction.increment(attrib.id))}
            >
              +
            </button>
            <button
              className="attrib-button"
              onClick={() => dispatch(AttribAction.decrement(attrib.id))}
            >
              -
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

Ответы [ 2 ]

0 голосов
/ 26 сентября 2019

Вы можете использовать хук useEffect для запуска выборки данных.

Передача пустого массива в качестве зависимостей означает, что эффект будет запущен только один раз. 

import React, { useEffect } from 'react';

function Attributes({ attributes, dispatch }){

    useEffect(() => {
        axios.get(`/api/heroes/1/get-attributes`)
            .then(res => {
               dispatch(AttribAction.set(objectToArray(res.data)));
            });
    }, [])

    return(
        <div className="content">
            {attributes.map((attrib, index) =>
                <div key={index} className={attrib.id == null ? "attrib-block empty" : "attrib-block"}>
                    <p><strong>{attrib.name}</strong>: {attrib.value}</p>
                    <div>
                        <button className="attrib-button" onClick={() => dispatch(AttribAction.increment(attrib.id))}>+</button>
                        <button className="attrib-button" onClick={() => dispatch(AttribAction.decrement(attrib.id))}>-</button>
                    </div>
                </div>
            )}
        </div>
    );
}
0 голосов
/ 26 сентября 2019

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

import React, { useEffect } from 'react';

function Attributes({ attributes, dispatch }) {
  useEffect({
   axios.get(`/api/heroes/1/get-attributes`)
     .then(res => {
       dispatch(AttribAction.set(objectToArray(res.data)));
     });
  }, []);

  // ... etc
}
...