Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

63
Vistas
setState is not updating the values immediately on UI

Helle everyone ,

I was working on react framework and was using a setState to set a value and display it on UI. But it is not immediately updating its value. whenever I call the computeTotalQty function to set the value, it sets the value but the change is not reflected in containerList function which updates the value on UI. It displays the value a step later. Same is the case with containerSetList. Whenever the user clicks the removeItem button, it doesn’t immediately remove the item from the screen, though it is removed from the containerSetList.

Code for it is:

const [containerSetList, setContainerSetList]=useState<containerSet[]>([])
  const [totalQty,setTotalQty]=useState(0);

  let tempQty=0;

const computeTotalQty= ()=>{
    containerSetList.map((item:any)=>{
      tempQty=tempQty+item.quantity.value;
    })
    setTotalQty(tempQty);
  }

const ContainerList=()=>{
    return(
      <div >
         <Text alignment="center">
           Total Containers: {containerSetList.length} {" "}
           Total { unitType == "unit" ? "units" : "Weight"} : {totalQty} {unitType == "unit"?"":"gms"}
         </Text>
        <Divider/>
        <Table headerRows={1} spacing="small" showDividers={true}>
          <TableRow>
            <TableCell>Container ID</TableCell>
            <TableCell>Quantity</TableCell>
            <TableCell></TableCell>
          </TableRow>
          {containerSetList.map((item:any)=>(
            <TableRow >
              <TableCell>{item.inventoryItem.id}</TableCell>
              <TableCell>{item.quantity.value}</TableCell>
              <TableCell>
                <Button type="secondary" onClick={(e:any)=>removeItem(item)} size="small">
                  <Icon tokens={CloseMedium} />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </Table>
        <Divider spacingAfter="medium"/>
      </div>
    )
  }
const removeItem=(props:any)=>{
    let indexToRemove= containerSetList.indexOf(props);
    containerSetList.splice(indexToRemove, 1);
    computeTotalQty();
  }

return (
    <div>
      {ContainerList()}
    </div>
  );

Can anyone please tell me how can I solve it?

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.