Почему не выполняется рендеринг после обновления данных?

Question

[Даниил Чистяков]

Почему данные, которые выводятся в console.log двумя строками ниже не выводятся в вёрстке?
Или возможно это сделать как-то более оптимизированно и лаконично?
Ссылка на CodeSandbox

Answer 1

[ReactLover]

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

Comments

[Даниил Чистяков]

О, благодарю, дубль соединения не заметил.

Answer 2

[Владимир]

Потому что кусок

var result = {};
  result.price = {};
  result.price.buy = {};
  result.price.sell = {};

  arr.map((res, key) => {
    result.price.buy[res] = {};
    result.price.buy[res].price = "Загрузка...";
  });
  arr.map((res, key) => {
    result.price.sell[res] = {};
    result.price.sell[res].price = "Загрузка...";
  });

У тебя выполняется на каждый вызов функции
У функциональных компонентов нет метода рендер, сама функция выполняется каждый раз когда у тебя поменялся стейт или пропсы.
Вынеси result в стейт (useState) и в ивент листенерах меняй стейт

Comments

[Даниил Чистяков]

Спасибо за подсказку!

Answer 3

[0xD34F]

setData(result);

Значение result здесь всегда одно и то же, а если значение не изменилось - компонент не будет заново отрендерен.
Можно по-быстрому заставить работать так, как вы хотите, передавая копию объекта: setData({ ...result });.

Comments

[Даниил Чистяков]

Спасибо большое, очень сильно оперативно выручили!