Obtenga todos los valores de las casillas de verificación de valores dinámicos
import * as React from "react"; import Checkbox from "@mui/material/Checkbox"; import FormControlLabel from "@mui/material/FormControlLabel"; import axios from "axios"; export default function Checkboxes() { const [users, setUsers] = React.useState([]); const [isChecked, setIsChecked] = React.useState(() => users.map((i) => false) ); React.useEffect(() => { getUsers(); }, []); const getUsers = async () => { try { const response = await axios.get( "https://jsonplaceholder.typicode.com/users" ); setUsers(response.data); } catch (error) { console.error(error); } }; const isCheckboxChecked = (index, checked) => { setIsChecked((isChecked) => { return isChecked.map((c, i) => { if (i === index) return checked; return c; }); }); }; console.log(isChecked); return ( <div> {users.map((checkbox, index) => { return ( <FormControlLabel key={index} control={ <Checkbox checked={isChecked[index]} onChange={(e) => isCheckboxChecked(index, e.target.checked)} /> } label={checkbox.name} /> ); })} <pre>{JSON.stringify(isChecked, null, 4)}</pre> </div> ); }Estoy tratando de hacer así. https://codesandbox.io/s/69640376-material-ui-react-multiple-checkbox-using-tabs-8jogw?file=/demo.js pero esto tiene datos estáticos.
esto es lo que he hecho hasta ahorahttps://codesandbox.io/s/festive-euclid-w3dzpq?file=/src/App.js
Si necesita la misma funcionalidad que el primer sandbox, entonces necesita actualizar de alguna manera su matriz "marcada" después de buscar a los usuarios.
Actualmente, esta matriz no está actualizada, por lo que nunca verá valores verdaderos/falsos
Prueba esto
const getUsers = async () => { try { const response = await axios.get( "https://jsonplaceholder.typicode.com/users" ); await setUsers(response.data); setIsChecked(() => response.data.map((i) => false)); } catch (error) { console.error(error); } };Si no quiere usar una función, puede usar una matriz
const [isChecked, setIsChecked] = React.useState([]); React.useEffect(() => { getUsers(); }, []); const getUsers = async () => { try { const response = await axios.get( "https://jsonplaceholder.typicode.com/users" ); await setUsers(response.data); setIsChecked(Array.from({length: response.data.length}, i => i = false)) } catch (error) { console.error(error); } };Para borrar las advertencias/errores de "estado no controlado", cambie esta línea
<Checkbox checked={isChecked[index] == null ? false : isChecked[index]} onChange={(e) => isCheckboxChecked(index, e.target.checked)} />La casilla de verificación debe tener un estado controlado inicial de verdadero o falso y no nulo/indefinido.
Revisé su código y descubrí que debe emitir en su método "isCheckboxChecked".
const isCheckboxChecked = (index, checked) => { isChecked[index] = checked; setIsChecked([...isChecked]); };Otro problema fue que debe esperar hasta recibir su respuesta de la API, por lo que solo establecemos casillas de verificación cuando tenemos usuarios.
React.useEffect(() => { if (users.length) setIsChecked(users.map((i) => false)); }, [users]);Espero que esto ayude 😁
Ya actualicé su sandbox.https://codesandbox.io/s/festive-euclid-w3dzpq?file=/src/App.js