Estoy usando nextjs y cuando ejecuto next build falla y da el siguiente error. El error me indica la línea 19 (que es una línea vacía) y la línea 33 (¿que ni siquiera existe?).
Para el mensaje de error en sí, vi un problema con eslint-plugin-react que supuestamente se solucionó recientemente, pero todavía recibo el error con la versión actualizada más reciente en package-lock.json :
"eslint-plugin-react": ">=7.29.4", También intenté eliminar la carpeta .next y hacer la next build nuevamente, y eliminar node-modules y hacer npm install , el error aún ocurre.
Archivo con el error:
import Subtitle1 from './subtitle-1' import Subtitle2 from './subtitle-2' class SwitchSubtitle extends Component { constructor(...args) { super(...args); this.state = { stitles: [<Subtitle1/>, <Subtitle2/>], index: 0 }; } componentDidMount() { this.timer = setInterval(() => { this.setState({index: this.state.index + 1}) }, 3500) } render() { const { index, stitles } = this.state; return( <p>{stitles[index % 2]}</p> ); } } export default SwitchSubtitle Error dado de next build :
info - Checking validity of types Failed to compile. ./components/landing/switchSubtitle.js 9:19 Error: Missing "key" prop for element in array react/jsx-key 9:33 Error: Missing "key" prop for element in array react/jsx-keyCuando representa una matriz de componentes, cada elemento necesita una key que sea única dentro de la matriz.
Estás representando efectivamente una matriz de este tipo aquí:
stitles: [<Subtitle1/>, <Subtitle2/>]Podrías agregar claves, como esta:
stitles: [<Subtitle1 key=“1”/>, <Subtitle2 key=“2”/>]Pero creo que un mejor enfoque sería poner los componentes mismos en la matriz y diferir el renderizado hasta que sea necesario. De esta manera, solo está renderizando el componente que realmente se está mostrando:
stitles: [Subtitle1, Subtitle2] // … const Cmp = stitles[index % 2]; return ( … <Cmp /> … )No creo que necesite los títulos de la matriz como estado, el hecho de que el índice se incremente y el estado se cambie y la función de representación se active es suficiente, ¿por qué no intenta esto?
return( {index%2 == 0 ? ( .... <Subtitle1/> ... ) : ( ... <Subtitle2/> ... )} );Creo que en este caso el error es un poco engañoso, lo que probablemente significa es que simplemente necesita pasar una clave a este componente (suponiendo que lo mapee)
Intenta agregar la clave al elemento p
return( <p key={index}>{stitles[index % 2]}</p> );