Búsqueda de sitios web

javascript - ¿Método push en React Hooks (useState)?

¿Cómo empujar un elemento dentro de un array de useState en React? ¿Es eso un método antiguo en el estado de React? ¿O algo nuevo?

Por ejemplo, ¿ejemplo de push de setState?

Respuesta #1

Cuando usas useState, puedes obtener un método de actualización para el elemento de estado:

const [theArray, setTheArray] = useState(initialArray);

entonces, cuando quieres agregar un nuevo elemento, usas esa función y pasas el nuevo arreglo o una función que creará el nuevo arreglo. Normalmente lo último, ya que las actualizaciones de estado son asincrónicas y a veces se agrupan:

setTheArray(oldArray => [...oldArray, newElement]);

A veces puedes prescindir de usar ese formulario de callback, si solo actualizas el arreglo en los controladores para ciertos eventos específicos del usuario como click (pero no como mousemove):

setTheArray([...theArray, newElement]);

Los eventos para los cuales React asegura que el renderizado se complete son los "eventos discretos" listados aquí.

Ejemplo en vivo (pasando un callback a setTheArray):

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Debido a que la única actualización de theArray allí es la que ocurre en un evento click (uno de los eventos "discretos"), podría arreglármelas con una actualización directa en addEntry:

const {useState, useCallback} = React;
function Example() {
    const [theArray, setTheArray] = useState([]);
    const addEntryClick = () => {
        setTheArray([...theArray, `Entry ${theArray.length}`]);
    };
    return [
        <input type="button" onClick={addEntryClick} value="Add" />,
        <div>{theArray.map(entry =>
          <div>{entry}</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>

Respuesta #2

Para expandir un poco más, aquí hay algunos ejemplos comunes. Comenzando con:

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

Agregar elemento al final del arreglo

setTheArray(prevArray => [...prevArray, newValue])

Añadir/actualizar elemento al final del objeto

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

Agregar/actualizar elemento al final de un arreglo de objetos

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

Agregar elemento al final de un objeto de arreglos

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

Aquí hay algunos ejemplos que también funcionan. https://codesandbox.io/s/reacthooks-push-r991u

Respuesta #3

Puedes agregar un arreglo de Datos al final del estado personalizado:

  const [vehicleData, setVehicleData] = React.useState<any[]>([]);
  setVehicleData(old => [...old, ...newArrayData]);

Por ejemplo, a continuación, aparece un ejemplo de axios:

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        {
          url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
          method: 'get',
        }
      );
      setVehicleData(old => [...old, ...result.data.data]);
    };

    fetchData();
  }, [page]);

Respuesta #4

El método más recomendado es usar la función envolvente y el operador spread juntos. Por ejemplo, si has inicializado un estado llamado name así,

const [names, setNames] =  useState([])

Puedes empujar a este arreglo así,

setNames(names => [...names, newName])

Espero que eso ayude.

Artículos relacionados