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
    • Comercial
    • Calculadora

0

91
Vistas
State is not up to date in functions of array of components React
import React, { useState } from "react";

const Person = ({ id, name, age, deleteThisPerson }) => {
  return (
    <div className="person">
      <p>{name}</p>
      <p>{age}</p>
      <button onClick={() => deleteThisPerson(id)}>Delete This Person</button>
    </div>
  );
};

const ArrayOfComponents = () => {
  const deleteThisPersonHandler = (id) => {
    console.log("[ArrayOfComponents] id : ", id);
    console.log("[ArrayOfComponents] personArrOfComp : ", personArrOfComp);
  };

  const [personArrOfComp, setPersonArrOfComp] = useState([
    <Person
      id="pc1"
      key="pc1"
      name="pc1"
      age={12}
      deleteThisPerson={deleteThisPersonHandler}
    />,
  ]);

  const addNewPersonHandler = () => {
    let r = new Date().getTime();
    setPersonArrOfComp((prevState) => {
      return prevState.concat(
        <Person
          id={r}
          key={r}
          name={"PCC" + r}
          age={Math.floor(Math.random() * 100)}
          deleteThisPerson={deleteThisPersonHandler}
        />
      );
    });
  };

  return (
    <div>
      <button onClick={addNewPersonHandler}>Add New Person</button>
      {personArrOfComp}
    </div>
  );
};

export default ArrayOfComponents;

Add some persons by clicking Add New Person button. After that when clicking on Delete This Person button, deleteThisPersonHandler function shows previous state, not the most current state.

Can anyone explain this behavior of ReactJs. Why the state is not updating in deleteThisPersonHandler function after adding new person.

7 months ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

It's because you're putting components on state which reference a lambda that closes over an old version of deleteThisPersonHandler.

Components are not appropriate react state values. State should be the simplest possible data that your component needs to store to be able to render the UI. In this case that's probably a list of ids.

const [persons, setPersons] = useState(["pc1"]);

const addPerson = setPersons([...persons, Date.now()]);

return {persons.map(p => <Person
      id={p}
      key={p}
      name={p}
      age={12}
      deleteThisPerson={deleteThisPersonHandler}
    />};

There, no components on state! You can swap out the scalar persons with any complex object type you need.

7 months ago · Juan Pablo Isaza Denunciar

0

It's because of the deleteThisPersonHandler that you are passing as a prop. In setPersonArrOfComp you are setting a new state, but it hasn't been updated yet. Your deleteThisPersonHandler function that you are passing references the current state of personArrOfComp, and not the state that you are attempting to currently update to. It will always be the previous state.

setPersonArrOfComp((prevState) => {
      return prevState.concat(
        <Person
          id={r}
          key={r}
          name={"PCC" + r}
          age={Math.floor(Math.random() * 100)}
          deleteThisPerson={deleteThisPersonHandler}
        />
      );
    });
7 months ago · Juan Pablo Isaza Denunciar

0

that's because you used a console.log() which shows the previous state, not the current state, your job is already done but it's the nature of the console.log(). so you can show your result as:

const deleteThisPersonHandler = (id) => {
alert("[ArrayOfComponents] id : "+ id);
alert("[ArrayOfComponents] personArrOfComp : "+ personArrOfComp);

};

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