Quiero mostrar algunos registros en una tabla usando React pero recibí este error:
Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:
- Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
- Podrías estar rompiendo las Reglas de los Hooks
- Es posible que tenga más de una copia de React en la misma aplicación Consulte los consejos sobre cómo depurar y solucionar este problema.
import React, { Component } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; const useStyles = makeStyles(theme => ({ root: { width: '100%', marginTop: theme.spacing(3), overflowX: 'auto', }, table: { minWidth: 650, }, })); class allowance extends Component { constructor() { super(); this.state = { allowances: [], }; } componentWillMount() { fetch('http://127.0.0.1:8000/allowances') .then(data => { return data.json(); }).then(data => { this.setState({ allowances: data }); console.log("allowance state", this.state.allowances); }) } render() { const classes = useStyles(); return ( < Paper className = { classes.root } > < Table className = { classes.table } > < TableHead > < TableRow > < TableCell > Allow ID < /TableCell> < TableCell align = "right" > Description < /TableCell> < TableCell align = "right" > Allow Amount < /TableCell> < TableCell align = "right" > AllowType < /TableCell> < /TableRow> < /TableHead> < TableBody > { this.state.allowances.map(row => ( < TableRow key = { row.id } > < TableCell component = "th" scope = "row" > { row.AllowID } < /TableCell> < TableCell align = "right" > { row.AllowDesc } < /TableCell> < TableCell align = "right" > { row.AllowAmt } < /TableCell> < TableCell align = "right" > { row.AllowType } < /TableCell> < /TableRow> )) } < /TableBody> < /Table> < /Paper> ); } } export default allowance;Tuve este problema cuando npm link para instalar mi biblioteca local, que construí usando cra . Encontré la respuesta aquí . Que literalmente dice:
Este problema también puede surgir cuando usa el enlace npm o un equivalente. En ese caso, su paquete podría "ver" dos React: uno en la carpeta de la aplicación y otro en la carpeta de su biblioteca. Asumiendo que 'myapp' y 'mylib' son carpetas hermanas, una solución posible es ejecutar 'npm link ../myapp/node_modules/react' desde 'mylib'. Esto debería hacer que la biblioteca use la copia React de la aplicación.
Por lo tanto, ejecutar el comando: npm link <path_to_local_library>/node_modules/react , p. en mi caso npm link ../../libraries/core/decipher/node_modules/react del directorio del proyecto solucionó el problema.
Solo puede llamar ganchos desde funciones de React. Lea más aquí .
Simplemente convierta el componente de la clase Allowance en un componente funcional.
Demostración de CodeSandbox en funcionamiento .
const Allowance = () => { const [allowances, setAllowances] = useState([]); useEffect(() => { fetch("http://127.0.0.1:8000/allowances") .then(data => { return data.json(); }) .then(data => { setAllowances(data); }) .catch(err => { console.log(123123); }); }, []); const classes = useStyles(); return ( < Paper className = { classes.root } > < Table className = { classes.table } > < TableHead > < TableRow > < TableCell > Allow ID < /TableCell> < TableCell align = "right" > Description < /TableCell> < TableCell align = "right" > Allow Amount < /TableCell> < TableCell align = "right" > AllowType < /TableCell> < /TableRow> < /TableHead> < TableBody > { allowances.map(row => ( < TableRow key = { row.id } > < TableCell component = "th" scope = "row" > { row.AllowID } < /TableCell> < TableCell align = "right" > { row.AllowDesc } < /TableCell> < TableCell align = "right" > { row.AllowAmt } < /TableCell> < TableCell align = "right" > { row.AllowType } < /TableCell> < /TableRow> )) } < /TableBody> < /Table> < /Paper> ); }; export default Allowance;Puede usar "exportar predeterminado" llamando a una función de flecha que devuelve su React.Component pasándolo a través de los accesorios de objeto de la clase MaterialUI, que a su vez se usarán dentro del renderizado del componente ().
class AllowanceClass extends Component{ ... render() { const classes = this.props.classes; ... } } export default () => { const classes = useStyles(); return ( <AllowanceClass classes={classes} /> ) }