Aprendiendo mediante la codificación, aquí tengo un gráfico simple, donde hay diferentes datos, como los datos actuales, todos y filtrados, el primer código funciona bien, pero quería establecer Estado, así que cambié un poco el código (segundo código), si elimino 'setTest' da 'Error: demasiados re-renderizados. React limita el número de renderizaciones para evitar un bucle infinito.' ¿Hay una solución para esto o debería usar useEffect de alguna manera? y otra pregunta es por qué debo llamar a la función 'kk ()', y no solo hacer referencia a ella 'kk' porque cuando uso la referencia da el error 'Error de tipo no detectado: no se pueden leer las propiedades de undefined' pero al llamar a la función no dará error , pero luego he usado la referencia a la función sin problema '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} />El inglés no es mi lengua materna, por lo que podría haber errores.
No debe llamar a una función de cambio de estado dentro de su lógica de representación sin algún tipo de condición. Sin una condición para evitar un cambio de estado, se produce un bucle infinito como está viendo.
Una opción que puede probar es llamar a setTest("testData2") en una acción de usuario en particular, como esta:
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} />Pero sin ver más de ese código, esa opción puede no tener sentido para usted.
Otra opción sería comprobar el valor de test antes de llamar a setTest("testData2") , así:
const [test, setTest] = useState<any>("testData1"); const kk = () => { if (test !== "testData2") { setTest("testData2"); } return curentData ? allData : filteredData; }; <Graph data={hideData ? kk() : allData} onClickNode={onClickNode} />