Entiendo que el siguiente código agrega un nuevo objeto a una matriz de objetos pero es confuso en una sintaxis específica: setProductList([array, obj])
Por lo que veo, la función setProductList toma un objeto. Ese objeto consta de una matriz y un objeto. Entonces, ¿cómo agrega el objeto a la matriz? ¿Está esto integrado en JS o React?
// array of products const Products = [ { item: "basketball", price: 3, description: "basketball desc", }, { item: "football", price: 5, description: "football desc", }, ]; // setting state const [productList, setProductList] = useState(Products); // handling click const handleClick = () => { // Don't quite understand the syntax of below block setProductList([ ...productList, // spread creates a copy of the array { item: "baseball", price: 4, description: "baseball desc", }, ]); };Lo que estás viendo es el operador Spread (...)
La sintaxis extendida se puede utilizar cuando todos los elementos de un objeto o matriz deben incluirse en una lista de algún tipo .
Al escribir [ (element inside) ] , creó una nueva matriz. ...productList solo no crea una nueva matriz
Podrías entender ...productList ya que te ayuda a escribir código más corto, en lugar de escribir así
setProductList([ productList[0], productList[1], // ... productList[productList.length - 1], { item: "baseball", price: 4, description: "baseball desc", }, ]) Otro ejemplo que podría ayudarlo a comprender el operador de propagación es el uso de Math.max . Básicamente, la sintaxis de Math.max es Math.max(value0, value1, ... , valueN) .
Por ejemplo, tiene una matriz de N elementos, porque Math.max únicamente no puede tomar una matriz como argumentos, por lo que para calcular el máximo de la matriz, puede iterar cada elemento y comparar
const arr = [1, 3, 2] let max = -Infinity for (const num of arr) { max = Math.max(max, num) } console.log(max)Pero ahora con el operador de propagación, podría lograr el mismo resultado de una manera más corta
const arr = [1, 3, 2] let max = Math.max(...arr) console.log(max)Esta característica está integrada en js y se llama Extensión de objetos
Ejemplo
var x = [1, 2] // an array console.log(x) // spreads an array, and put an extra element var y = [...x, 6] console.log(y)entonces, el enlace de estado devuelve una función aquí: setProductList Eso solo actualiza el estado a la nueva matriz.
es una práctica común. Vea esta respuesta detallada para una explicación detallada
Ok, el código que no entiendes básicamente está configurando una nueva copia de la matriz actual, PERO incluyendo el nuevo elemento (sería como insertar un nuevo elemento en la matriz. PERO empujar modificaría la matriz original. En este caso, está haciendo una copia y empujando el valor a esa nueva matriz)
Vamos línea por línea. Tenemos:
setProductList([ ...productList, { item: "baseball", price: 4, description: "baseball desc", }, ]);Definiremos:
setProductList([ // Line 0 ...productList, // Line 1 { // Line 2 item: "baseball", // Part of Line 2 price: 4, // Part of Line 2 description: "baseball desc", // Part of Line 2 }, // Part of Line 2 ]); // Part of Line 1(]) & 0())setProductList ) estamos configurando un nuevo valor para productsList porque reacciona y usaEstado. ( https://reactjs.org/docs/hooks-state.html )