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

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

Por ejemplo, ¿ ejemplo de push setState ?

Cuando lo usa useState, puede obtener un método de actualización para el elemento de estado:

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

luego, cuando desee agregar un nuevo elemento, use esa función y pase la nueva matriz o una función que creará la nueva matriz. Normalmente esto último, dado que las actualizaciones de estado son asincrónicas y, a veces, por lotes:

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

A veces puede salirse sin usar ese formulario de devolución de llamada, si solo actualiza la matriz en los controladores para ciertos eventos de usuario específicos como click(pero no como mousemove):

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

Los eventos para los que React asegura que el renderizado se vacíe son los "eventos discretos" enumerados aquí .

Ejemplo en vivo (pasando una devolución de llamada 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 que theArrayhay es la de un clickevento (uno de los eventos "discretos"), podría salirme 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>

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

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

Empuje el elemento al final de la matriz

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

Insertar / actualizar elemento al final del objeto

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

Insertar / actualizar elemento al final de la matriz de objetos

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

Empuje el elemento al final del objeto de las matrices

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

Aquí también hay algunos ejemplos prácticos. https://codesandbox.io/s/reacthooks-push-r991u

De la misma manera que lo haces con el estado "normal" en los componentes de la clase React.

ejemplo:

function App() {
  const [state, setState] = useState([]);

  return (
    <div>
      <p>You clicked {state.join(" and ")}</p>
      //destructuring
      <button onClick={() => setState([...state, "again"])}>Click me</button>
      //old way
      <button onClick={() => setState(state.concat("again"))}>Click me</button>
    </div>
  );
}

// Save search term state to React Hooks with spread operator and wrapper function

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query))

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query))

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query])

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query])

https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

setTheArray([...theArray, newElement]);es la respuesta más simple, pero tenga cuidado con la mutación de elementos en el Array . Utilice la clonación profunda de elementos de matriz.

El método más recomendado es usar la función de envoltura y el operador de extensión juntos. Por ejemplo, si ha inicializado un estado llamado nameasí,

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

Puede empujar a esta matriz de esta manera,

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

Espero que ayude.

Probé los métodos anteriores para insertar un objeto en una matriz de objetos en useState pero tuve el siguiente error al usar TypeScript :

Escriba 'TxBacklog [] | undefined 'debe tener un método' Symbol.iterator 'que devuelva un iterator.ts (2488)

La configuración de tsconfig.json aparentemente era correcta:

{
   "compilerOptions": {
   "target": "es6",
   "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es6",
],

Esta solución resolvió el problema (mi código de muestra):

Interfaz:

   interface TxBacklog {
      status: string,
      txHash: string,
   }

Variable de estado:

    const [txBacklog, setTxBacklog] = React.useState<TxBacklog[]>();

Empuje un nuevo objeto en la matriz:

    // Define new object to be added
    const newTx = {
       txHash: tx,
       status: 'pending'
    };
    // Push new object into array
    (txBacklog) 
       ? setTxBacklog([...txBacklog, newTx])
       : setTxBacklog([newTx]);

Leí otras alternativas como agregar '!' al nuevo objeto, pero no funcionó tan bien.