React hooks，将函数的 return 值设置为 state 导致无限循环

Question

设置状态无限循环

我有一个对象数组 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"
    }
  ];

下面的代码几乎可以正常工作，但我无法将 return 值设置为状态。当我尝试在函数中使用 useState 时，它给了我无限循环。

如何设置 historyResult() return 值的状态，以便每次值更改时函数都会调用并给出不同的结果。

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 through
        let filteredData = testData.filter(item => {
          const withdraw = item.amount < 0;
          const admission = item.amount > 0;
          // Checking which 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;
      };
  }

如何将 historyResult 的 return 值设置为没有无限循环的状态？
我试过 useEffect，但我想我弄错了，而且还出现了无限循环。

Answer 1

您可以使用：

setFilteredArray([...filteredData]);

同时使用初始值初始化您的状态，例如空数组

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

您不需要 return 来自函数的值。在 React 世界中，你永远不会这样做，相反，你只需设置你的状态以获得所需的结果，并在你想要的地方使用该状态。（请记住，设置状态是一个异步调用）

useEffect 中无限循环的原因：

useEffect 每次组件状态更改时调用，每当状态再次更改时调用 useEffect 并继续此循环。这里很好guide防止死循环useEffect

React hooks，将函数的 return 值设置为 state 导致无限循环

React hooks, set return value of a function to state causes infinite loop

javascript

infinite-loop

reactjs

react-hooks

设置状态无限循环