Реакция хуков, установка возвращаемого значения функции в состояние вызывает бесконечный цикл - PullRequest
Новая
       7

Реакция хуков, установка возвращаемого значения функции в состояние вызывает бесконечный цикл

5 голосов
/ 11 февраля 2020

Бесконечно l oop в состоянии установки

У меня есть массив объектов testData, которые я хочу отфильтровать через желоб, чтобы получить другой массив с результатами: 

  const testData = [
    {
      time: "2020-01-23T13:16:53+01:00",
      amount: "0.010000000000000000",
      txid: "7b1f6aa63910618913c1c1c2902671d2e4f074a8c77ecfd3d16994a05fbf952d"
    },
    {
      time: "2020-01-31T09:09:13+01:00",
      amount: "-0.012739560000000000",
      txid: "7df38cb2d7538f794d725e4c7e68a3e1e7ee6fd570c3575c53776808c0200145"
    },
    {
      time: "2020-01-31T09:09:24+01:00",
      amount: "0.010000000000000000",
      txid: "db47ba29a36bd2343af287bd75f489c2f39d7ce1edcf24176c555233b0e24286"
    }
  ];

Код ниже работает почти хорошо, но я не могу установить возвращаемое значение в состояние. Когда я пытаюсь использовать State в функции, это дает мне бесконечное значение l oop. Как я могу установить состояние возвращаемого значения historyResult (), чтобы каждый раз, когда значение менялось, функция вызывала и давала разные результаты. 

import React, { useState, useEffect } from 'react';

  const History = () => {
    const [filteredArray, setFilteredArray] = useState();

      // values are coming from Formik. When changed, function should run once more.
      const historyResult = values => {
        let tType = values && values.transactionType; // Checking if the value exists, saving transactionType of values and saving it to variable
        // testData is an array of objects that i want to filter trough
        let filteredData = testData.filter(item => {
          const withdraw = item.amount < 0;
          const admission = item.amount > 0;
          // Checking wich tType was returned and do instructions
          const type = tType == 1 ? withdraw : tType == 2 ? admission : console.log('no value');
          return type;
        });
        console.log(filteredData); // This log works beautifully - it gives me data i want (array of objects)
        setFilteredArray(filteredData); // I tried to set state on this but got infinite loop. Why's that?
        return filteredData;
      };
  }
  1. Как я могу установить возвращаемое значение historyResult в состояние без бесконечного l oop?
  2. Я пытался использовать Effect, но я думаю, что я все понял неправильно, а также получил бесконечный l oop.

1 Ответ

4 голосов
/ 11 февраля 2020
  1. Вы можете использовать:

setFilteredArray([...filteredData]);

Также инициализируйте ваше состояние с начальным значением, например, для пустого массива

const [filteredArray, setFilteredArray] = useState([]);

Вам не нужно возвращать значение из функции. Вы никогда не делаете этого в мире React, вместо этого вы просто устанавливаете ваше состояние с желаемыми результатами и используете это состояние там, где вы хотите. (имейте в виду, что состояние установки - это асин c вызов)

Причина бесконечного l oop в useEffect:

useEffect вызывает каждый раз, когда изменяется состояние компонента, и всякий раз, когда состояние изменяется снова, useEffect получает вызов, и этот цикл продолжается. Вот хороший гид для предотвращения бесконечной l oop в useEffect

...