reaccionarjs: las pestañas que se cargan antes que las pestañas internas provocan un error "El valor proporcionado al componente

Utilizo un elemento de pestañas de material-UI, pero las pestañas en sí las recibo de los accesorios. la primera pestaña con el valor 0, quiero ser elegido.

Aquí mi código:

import React, { useContext } from 'react';
import { ChannelContext } from '../context/channelContext'
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

export default function Channels(props) {
  let channelsList = []
  props.channels.forEach((elem,i) => {
    channelsList.push( <Tab key={i} label={elem.channel_name} value={elem.server_id-1} />)
  })

  const [, setchannelBanner] = useContext(ChannelContext)
  const [channelId, setChannelId] = React.useState(0); 

  const handleChange = (event, newValue) => {
    setChannelId(newValue)
    setchannelBanner(props.channels[newValue].bg_image);
  };

  return (
        <AppBar position="static" color="inherit" elevation={0}>
        <Tabs 
          value={channelId}
          onChange={handleChange} 
          indicatorColor="primary"
          textColor="primary"
          variant="scrollable"
          scrollButtons="auto"
          aria-label="scrollable auto tabs" className="tabs">
          {channelsList}
        </Tabs>
        </AppBar>
  );
}

Recibo este error en la consola del navegador:

"Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with `0`.
You can provide one of the following values: NaN."

Si cambio React.useState(0) a React.useState(false) o React.useState(NaN), el error desaparece pero no se elige la primera pestaña. Entiendo que esto sucede porque el elemento Tabs principal se carga antes que la matriz de pestañas interna. ¿Cómo sugieres solucionarlo?

1

¿Puedes¿Por favor comparta el enlace del código Sandbox con este código? Sería mucho más fácil editar/depurar cosas allí.

Sbagaria2710

26/03/2021 a las 23:10

------------------------------------

Una forma de resolverlo sería usar useEffect y cambiar el estado de NaN a 0 cuando se cargan las pestañas principales. Sería mejor si pudieras compartir un enlace al código Sandbox

------------------------------

Descubrí que la respuesta es usar useEffect en los accesorios y luego, dentro de useEffect, verificar si el primer elemento/canal existe, solo luego crear setChannelId(0).

import React, { useContext, useEffect } from 'react';
import { ChannelContext } from '../context/channelContext'
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

export default function Channels(props) {
  const [, setchannelBanner] = useContext(ChannelContext)
  const [channelId, setChannelId] = React.useState(false); 

  // setChannelId after tabs are loaded
  useEffect(() => {
    if( props.channels[0].server_id >= 0 ) setChannelId(0)
  }, [props]);

  const handleChange = (event, newValue) => {
    setChannelId(newValue)
    setchannelBanner(props.channels[newValue].bg_image);
  };

  return (
        <AppBar position="static" color="inherit" elevation={0}>
          <Tabs 
            value={channelId}
            onChange={handleChange} 
            indicatorColor="primary"
            textColor="primary"
            variant="scrollable"
            scrollButtons="auto"
            aria-label="scrollable auto tabs" className="tabs">
            {props.channels.map((elem,i) => (
              <Tab key={i} label={elem.channel_name} value={elem.server_id-1}/>
            ))}
          </Tabs>
        </AppBar>
  );
}