estoy usando reaccionar, nodo express, postgres
Tengo un componente de reacción que es una tabla html que se completa a partir de una tabla de postgres.
Aquí están los materiales del componente principal:
const Materials = () => { const [thickness1, setThickness] = useState(0); const [width1, setWidth] = useState(0); const [length1, setLength] = useState(0); const [partTotalDemand, setTotalDemand] = useState(0); const [partPlanned, setPlanned] = useState(0); ...Aquí hay un método en el componente que recupera datos
// Material requirements calculation const getReq = async (id) => { try { const response = await fetch(`http://localhost:5000/materials/${id}`, [id]) const jsonData = await response.json(); const tempThickness = jsonData.parts_material_thickness const tempWidth = jsonData.parts_material_width const tempLength = jsonData.parts_material_length const tempTotalDemand = jsonData.workorder_total const tempPlanned = jsonData.parts_produced stateSetter(tempThickness, tempWidth, tempLength) } catch (err) { console.log(err.message); } }Luego quiero actualizar los estados de las constantes globales:
const stateSetter = (thickness, width, length) => { try { setThickness(thickness); setWidth(width); setLength(length); console.log(thickness1); console.log(width1); console.log(length1); } catch (err) { console.log(err.message) } } useEffect(() => { stateSetter(); }, [thickness1]);Esencialmente, se supone que el método getReq() recupera la información, y luego necesito actualizar los estados con esos valores. Según tengo entendido, necesito volver a renderizar el componente para que los nuevos estados sean utilizables. Intenté hacer esto a través de useEffect() pero no tuve éxito. La idea era evitar que getReq() se activara en el primer renderizado, pero si el estado cambia para grosor1/ancho1/largo1, entonces debería activarse y volver a renderizarse, ¡mucha ayuda!
Estás complicando demasiado esto. Todo lo que necesita hacer es establecer los valores de estado:
const getReq = async (id) => { try { const response = await fetch(`http://localhost:5000/materials/${id}`, [id]) const jsonData = await response.json(); // set state values setThickness(jsonData.parts_material_thickness); setWidth(jsonData.parts_material_width); setLength(jsonData.parts_material_length); setTotalDemand(jsonData.workorder_total); setPlanned(jsonData.parts_produced); } catch (err) { console.log(err.message); } }No necesita hacer nada manualmente para volver a renderizar el componente. Se volverá a renderizar cada vez que se actualice el estado. Entonces, las funciones de "setter" que se invocan aquí activarán esa nueva representación. (Todas las actualizaciones de estado se procesarán por lotes. Por lo tanto, lo anterior no activará 5 renderizaciones, solo una con los 5 valores de estado actualizados).
Donde usaría useEffect es cuando desea tener alguna lógica que responda a un cambio en un estado particular. Por ejemplo, si desea mostrar un mensaje cada vez que el thickness cambia a un valor negativo, haría algo como:
useEffect(() => { if (thickness < 1) { alert('negative thickness!'); } }, [thickness]);Pero eso no es lo que estás haciendo aquí. Todo lo que estás haciendo aquí es establecer valores de estado.