Tengo una lista de objetos almacenados en un estado llamado itemsToUpload . Hay un botón para subir la lista de objetos a una base de datos. El siguiente es un objeto en la lista.
{ type:"Fiat", model:"500", color:"white", imgUrl="https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-%E2%80%98Hey-Google-car.jpg" }; Al enviar los datos a la base de datos, quiero que imgUrl nulo.
El siguiente código es cómo configuro imgUrl en nulo.
const submitHandler =async()=>{ setitemsToUpload((items)=> items.map((item)=>({ ...item, imgUrl:null }))) const response =await axios.post("api url",itemsToUpload) console.log(response ) } Después de convertir imgUrl en nulo, el estado de itemsToUpload cambia, pero los datos que se envían a la API indican que imgUrl no es nulo
Cuál es el problema aquí?
Array.map no modifica la matriz, crea una nueva matriz con el valor devuelto, por lo que debe asignar el resultado de su mapa a la matriz
const items = [ { type:"Fiat", model:"500", color:"white", imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-%E2%80%98Hey-Google-car.jpg" } ] const modifiedItems = items.map((item)=>({ ...item, imgUrl:null })) console.log(items) console.log(modifiedItems)El código está funcionando aquí. Así que no estoy seguro de si el problema pertenece a esta parte.
const array = [{ type:"Fiat", model:"500", color:"white", imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-%E2%80%98Hey-Google-car.jpg" }, { type:"Fiat", model:"500", color:"white", imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-%E2%80%98Hey-Google-car.jpg" }, { type:"Fiat", model:"500", color:"white", imgUrl:"https://latestlyhunt.com/wp-content/uploads/2021/03/Fiat-made-a-%E2%80%98Hey-Google-car.jpg" }]; console.log(array); const clearIt = array => { return array.map(item => { item.imgUrl = null return item; }); }; const newArray = clearIt(array); console.log(newArray);En su código, setitemsToUpload no muta inmediatamente los elementos para itemsToUpload sino que le dice a React que programe una actualización de estado y vuelva a renderizar, mientras que submitHandler continúa ejecutándose y llama a axios.post antes de que se actualicen los elementos para itemsToUpload .
Intenta refactorizarlo así:
const submitHandler = async () => { const newItemsToUpload = items.map((item) => ({ ...item, imgUrl: null })) setitemsToUpload((items) => newItemsToUpload) const response = await axios.post("api url", newItemsToUpload) console.log(response) }