javascript - 有没有办法同时用多个回调修改相同的状态？

Question

我正在尝试修改由对象数组组成的状态。我有一个带有 3 个输入（添加、修改、删除）的表单，我想知道是否有办法应用所有三个回调，我似乎无法实现，因为我相信函数是使用“陈旧”状态，因此仅应用 2 个回调。我尝试使所有代码异步，但这似乎不起作用。这是我的代码：

// I inherit the array from the context provider 
  const { libros, setLibros } = useContext(AppContext);

  const [libro, setLibro] = useState("");
  const [modificar, setModificar] = useState({
    libroAModificar: "",
    modificado: ""
  });
  const { libroAModificar, modificado } = modificar;

  const [eliminar, setEliminar] = useState("");

  const handleAgregar = (e) => {
    setLibro(e.target.value);
  };

  const handleEliminar = (e) => {
    setEliminar(e.target.value);
  };

  const handleModificar = (e) => {
    setModificar({
      ...modificar,
      [e.target.name]: e.target.value
    });
  };

// these are the three functions I'd like to execute on the same state
  const handleNuevoLibro = (e) => {
    e.preventDefault();
    if (libro !== "") {
      const conNuevosLibros = [
        ...libros,
        {
          nombre: libro,
          leido: false,
          id: libros.length + 1
        }
      ];
      setLibros(conNuevosLibros);
      setLibro("");
    }
  };

  const handleLibroModificado = (e) => {
    e.preventDefault();
    if (modificar !== "") {
      const modifiedLibros = libros.map((book) => {
        if (book.nombre.toLowerCase() === libroAModificar.toLowerCase()) {
          book.nombre = modificado;
        }
        return book;
      });
      setLibros(modifiedLibros);
      setModificar({
        libroAModificar: "",
        modificado: ""
      });
    }
  };

  const handleLibroEliminado = (e) => {
    e.preventDefault();
    if (eliminar !== "") {
      const librosConEliminado = libros.filter((book) => {
        return book.nombre.toLowerCase() !== eliminar.toLowerCase();
      });
      setLibros(librosConEliminado);
      setEliminar("");
    }
  };


// this is not working, it's only executing 2 of the three functions, or it's working on a stale state.
  const handleChange = (e) => {
    e.persist();
    handleNuevoLibro(e);
    handleLibroModificado(e);
    handleLibroEliminado(e);
  };

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="agregar"
          onChange={handleAgregar}
          value={libro}
        ></input>
        <br />
        <input
          type="text"
          name="libroAModificar"
          className="modificar"
          placeholder="inserte libro a modificar"
          onChange={handleModificar}
          value={libroAModificar}
        ></input>
        <input
          type="text"
          name="modificado"
          className="modificado"
          placeholder="inserte nuevo nombre"
          onChange={handleModificar}
          value={modificado}
        ></input>
        <br />
        <input
          type="text"
          className="borrar"
          placeholder="inserte libro a eliminar"
          onChange={handleEliminar}
          value={eliminar}
        ></input>
        <br />
        <button onClick={handleChange}>Enviar</button>
      </form>
      <br />
    </div>
  );
}```

Any help would be greatly appreciated. Thanks in advance.

标签： javascriptreactjsecmascript-6use-state