0

Tengo el siguiente componente, en el cual con un array dinamico lo recorro con un map y dibujo el componente, el codigo es el siguiente:

function createData(zone: string, tasahistorica: number, fat: number, tasacerebro: number, protein: number) {
  return { zone, tasahistorica, fat, tasacerebro, protein };
}
const rows = [
  createData('Zona Norte', 159, 6.0, 24, 4.0),
  createData('Zona Metropolitana', 237, 9.0, 37, 4.3),
  createData('Zona Centro', 262, 16.0, 24, 6.0),
  createData('Zona Sur', 305, 3.7, 67, 4.3),
];

export function ZoneGrid() {

  const [spacing, setSpacing] = React.useState<GridSpacing>(1);
  const classes = useStyles();
  const [cerebro, setcerebro] = useState(0);

  const handlerclick = (row:any,cerebro: any, index: any) => {

    cerebro= row + 1;

    console.log(row,cerebro );
    setcerebro(cerebro);
    // console.log(cerebro, index);
  }
  return (

    <Grid container justify="center" className={classes.root}>
      <Grid container justify="center" className={classes.body} >
        <Grid container className={classes.cabecera}>
          <Typography className={classes.title} style={{ width: 290 }}>Lugar</Typography>
          <Typography className={classes.title} style={{ width: 200 }}>Tasa Historica</Typography>
          <Typography className={classes.title} style={{ width: 30 }}></Typography>
          <Typography className={classes.title} style={{ width: 50 }}></Typography>
          <Typography className={classes.title} style={{ width: 200 }}>Cerebro</Typography>
          <Typography className={classes.title} style={{ width: 30 }}></Typography>
        </Grid>
        {
          rows.map((row: any, index: any) => (
            <Grid key={row.zone} container style={{ borderBottom: '1px solid #6666' }}  >
              <Typography className={classes.bodytextplace} style={{ width: 290 }}>
                <Typography className={classes.bodytext + " " + classes.subtitle} >Lugar</Typography>
                {row.zone}
              </Typography>
              <Typography className={classes.bodytext + " " + classes.columnvar} >
                <Typography className={classes.bodytext + " " + classes.subtitle} >Tasa Historica</Typography>
                {row.tasahistorica}
              </Typography>
              <Typography className={classes.bodytext + " " + classes.updown}>
                <Grid container direction="column" justify="center" alignItems="center">
                  <Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
                    <ExpandLessTwoToneIcon></ExpandLessTwoToneIcon>
                  </Button>
                  <Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
                    <ExpandMoreTwoToneIcon></ExpandMoreTwoToneIcon>
                  </Button>
                </Grid>
              </Typography>
              <Typography className={classes.bodytext} style={{ width: 50, color: '#666666' }}>|</Typography>
              <Typography className={classes.bodytext + " " + classes.columnvar} key={row.zone}>
                <Typography className={classes.bodytext + " " + classes.subtitle} >Cerebro</Typography>


                {cerebro}

              </Typography>
              <Typography className={classes.bodytext + " " + classes.updown} >
                <Grid container direction="column" justify="center" alignItems="center">

                  <Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} onClick={() => handlerclick(row.tasacerebro,cerebro , index)} size='small' >
                    <ExpandLessTwoToneIcon></ExpandLessTwoToneIcon>
                  </Button>

                  <Button variant="contained" style={{ backgroundColor: 'white', boxShadow: 'none' }} size='small' >
                    <ExpandMoreTwoToneIcon></ExpandMoreTwoToneIcon>
                  </Button>

                </Grid>
              </Typography>
            </Grid>
          ))
        }
        <Grid container justify="space-between" className={classes.buttonSection}>
          <Button className={classes.buttonBackchanges}>Deshacer Cambios</Button>
          <Button className={classes.buttonDone}>Guardar Cambios</Button>

        </Grid>

      </Grid>
    </Grid>
  );
}

el código me dibuja lo siguiente

introducir la descripción de la imagen aquí

lo que esta marcado en la imagen es un button que llama a handlerclick donde cambia el state de cerebro y le suma 1 al valor el problema es que cambia el valor de todas las filas y yo solo quiero que cambie el valor de la fila donde se esta haciendo click.

el codigo funciona basicamente asi (para ahorrar tiempo en analisis)

  1. creo una constante que es el array que luego recorrere
  2. declaro dentro de la función del componente los state cerebro y setcerebro, este state es el que debe sumar o restar segun se haga click
  3. esta hecho con material ui pero no subi todo el codigo si no mas bien la logica
4
  • Esta realizado con typescript y si lo se, es mala practica usar 'any' pero en lo que lo resuelvo lo normalizo Commented el 8 oct. 2019 a las 21:56
  • Puedes crear un componente "Fila" y manejar el state dentro del mismo, así cada fila tendrá su propio state. Luego puedes usar un prop para mandar el valor del state local hacia el componente padre. Commented el 8 oct. 2019 a las 22:27
  • como asi @SergioMaldonado? Commented el 9 oct. 2019 a las 12:45
  • Estás usando una única variable ´cerebro´ para todas las filas. Lo que dice @SergioMaldonado es que crees un nuevo componente (Fila) y que cuando haces rows.map devuelvas algo así como <Fila row={row} />. Dentro de ese componente vas a tener un state propio con su propio 'cerebro' que no depende de los demas. Tambien podes mantener los 4 valores de rows en tu estado, con algo como useState(rows.map(() => 0)) para que te quede [0, 0, 0, 0] y luego cuando actualizas usas cerebro[index] = cerebro[index] + 1 Commented el 9 oct. 2019 a las 13:00

1 respuesta 1

0

Gracias por sus comentarios pero encontré una solución que me parece no tan engorrosa y se debe a lo mejor a un problema "comun" lo primero que hice fue crear un interface de mi variables que se esta recorriendo y luego pasarlo a la función para que me devuelva ese tipo de objeto

interface ITasa{
  lugar: string,
  tasa:number
  tasaCerebro:number
  }

const createData = (zone: string, tasahistorica: number, tasacerebro: number):ITasa => {
  return {lugar:zone,tasa:tasahistorica,tasaCerebro:tasacerebro}
}
const rows = [
  createData('Zona Norte', 159, 6.0),
  createData('Zona Metropolitana', 237, 9.0),
  createData('Zona Centro', 262, 16.0),
  createData('Zona Sur', 305, 3.7),
];

luego cree el State con el tipo ITasa pasando como estado inicial el array de rows

  const [cerebro, setCerebro] = useState<ITasa[]>(rows);

luego igual que le codigo que publique recorro el array y en el handler paso por parametro la fila y el index entonces mi función queda asi:

  const handlerclick = (cerebro: any, index: any) => {

    const aux = cerebro;
    aux[index].tasaCerebro = aux[index].tasaCerebro + 1 ;
    console.log(cerebro[index]);
    setCerebro([...aux]);
  }

lo converti en una función de flecha

el problema despues de eso es que react no lo renderiza porque cree que es el mismo array por lo que se debe añadir los tres puntitos para que reac lo renderize

y funciona de manera espectacular

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.