无法在函数内部设置状态（反应）

Question

Learning by coding, here i have simple graph, where are different datas such as current, all and filtered data, first code works fine, but i wanted to setState so i changed code a little (second code), if i uncomment 'setTest' it give 'Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.' is there a fix to this or should i somehow use useEffect? and another question is why should i call function 'kk()', and not just reference to it 'kk' because when i use reference it give error 'Uncaught TypeError: Cannot read properties of undefined' but when calling function it wont give error, but then i have used reference to function without problem 'onClickNode={onClickNode}' .

1:

 import { Graph } from "react-d3-graph"; <Graph data={ hideData ? curentData ? allData : filteredData : allData } onClickNode={onClickNode} />

2:

 import { Graph } from "react-d3-graph"; const [test, setTest] = useState<any>("testData1"); const kk = () => { // setTest("testData2") return curentData ? allData : filteredData; }; <Graph data={hideData ? kk() : allData} onClickNode={onClickNode} />

English is not my mother language so could be mistakes.

Answer 1

You should not call a state changing function within your rendering logic without some sort of condition. Without a condition to prevent a state change results in an infinite loop as you are seeing.

One option you can try is call setTest("testData2") on a particular user action, like this:

  const [test, setTest] = useState<any>("testData1");
 
  const kk = () => {
    return curentData ? allData : filteredData;
  };
  
  const onClickNode = () => {
    // Handle other click logic...
    setTest("testData2");
  };
  
  <Graph data={hideData ? kk() : allData} onClickNode={onClickNode} />

But without seeing more of that code, that option may not make sense for you.

Another option would be to check the value of test before calling setTest("testData2") , like this:

  const [test, setTest] = useState<any>("testData1");
  
  const kk = () => {
    if (test !== "testData2") {
      setTest("testData2");
    }
    return curentData ? allData : filteredData;
  };
 
  <Graph data={hideData ? kk() : allData} onClickNode={onClickNode} />