¿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 ?
¿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 ?
Respuestas:
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
):
Debido a que la única actualización que theArray
hay es la de un click
evento (uno de los eventos "discretos"), podría salirme con una actualización directa en addEntry
:
useEffect
ejemplo ...?
useEffect
tiene una lista de dependencias vacía []
, se ejecutará solo durante el primer renderizado. Entonces el valor del theArray
interior del efecto siempre será initialArray
. En situaciones en las setTheArray([...initialArray, newElement])
que no tendría sentido, y cuando la theArray
constante siempre será igual a initialValue
, se necesitan actualizaciones funcionales.
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 name
así,
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.
setTheArray(currentArray => [...currentArray, newElement])
si lo anterior no funciona. Lo más probable es enuseEffect(...theArray..., [])
, es importante darse cuenta de quetheArray
es una constante, por lo que las actualizaciones funcionales son necesarios para los valores de futuro renders