Tengo una función:
async function setAllValues(value) { await stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .forEach((row) => { temp = { ...temp, [row.id]: value }; }); console.log('| temp', temp); return temp; }y una variable de estado:
const [rowValues, setRowValues] = useState(setAllValues(false)); Ahora quiero que el valor predeterminado de los valores de rowValues sea temp (la variable devuelta por la función), pero cada vez que registro valores de rowValues , se registra como una promesa. Cada vez que llamo a setRowValues , también llama a la función setAllValues (lo sé porque la temperatura está registrada en la función). ¿Cómo logro el resultado deseado?
Use un efecto para establecer el valor inicial una vez que la página se haya cargado:
useEffect(() => { setAllValues(false) .then(setRowValues) }, [])Mantenga la función fuera del cuerpo del componente para que React no se queje de que no esté en la matriz de dependencia.
Si no necesita que setAllValues sea async , elimine async await y configúrelo como estado inicial con
const [rowValues, setRowValues] = useState() => setAllValues(false))Actualmente lo estás ejecutando en cada render.
Ahora que ya no usa async/await await, puede simplemente pasar una función a useState , como se explica en "Estado inicial perezoso" :
const [rowValues, setRowValues] = useState(() => setAllValues(false));La función solo se llamará la primera vez que se renderice el componente.