Al principio, creo una address de matriz de objetos usando useState .
En useEffect , quiero actualizar address después de recibir la respuesta de la API.
El valor último de address debe ser
[ { id: "unit", label: "Unit", value: "Unit 1" }, { id: "floor", label: "Floor", value: "Floor 1" }, { id: "block", label: "Block", value: "Block 1" } ]¿Cómo puedo hacerlo?
Aplicación.js
import "./styles.css"; import React, { useState, useEffect } from "react"; export default function App() { const [address, setAddress] = useState([ // the value will be updated in useEffect { id: "unit", label: "Unit", value: "" }, // Value should be Unit 1 { id: "floor", label: "Floor", value: "" },// Value should be Floor 1 { id: "block", label: "Block", value: "" } // Value should be Block 1 ]); useEffect(() => { // let's pretent there is api GET request let responseData = { en: { unit: "Unit 1", floor: "Floor 1", Block: "Block 1" } // other language address which can be ignored }; // How to update the update of address below?? }, []); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } Caja de arena de código:
https://codesandbox.io/s/cranky-microservice-qjuhh?file=/src/App.js
Suponiendo que todos los elementos en address tienen un valor coincidente en los datos de responseData , podría usar:
useEffect(() => { // let's pretent there is api GET request let responseData = { en: { unit: "Unit 1", floor: "Floor 1", Block: "Block 1" } // other language address which can be ignored }; setAddress((address) => ( address.map((item) => ({ ...item, value: responseData.en[item.id] })) )); }, []); El código anterior recorre la matriz de address y asigna cada elemento a uno con un valor actualizado que se encuentra en responseData.en .
La razón por la que estoy usando una devolución de llamada es porque debe usar una devolución de llamada si el nuevo estado depende del estado anterior. Dado que solo desea actualizar una sola propiedad de un elemento (y no reemplazar completamente el estado), el nuevo estado depende del estado anterior, por lo que utiliza una devolución de llamada.
Puedes actualizar de la siguiente manera:
useEffect(() => { // let's pretent there is api GET request let responseData = { en: { unit: "Unit 1", floor: "Floor 1", Block: "Block 1" } // other language address which can be ignored }; // How to update the update of address below?? setAddress((prevAddress) => [ { ...prevAddress[0], value: responseData.en.unit }, { ...prevAddress[0], value: responseData.en.floor }, { ...prevAddress[0], value: responseData.en.Block } ]); }, []);Para su referencia: https://codesandbox.io/s/hopeful-silence-gs1yq?file=/src/App.js:425-1015
intente así, si está disponible, tomará en, de lo contrario, sea cual sea el primer idioma disponible
useEffect(() => { // let's pretent there is api GET request let responseData = { en: { unit: "Unit 1", floor: "Floor 1", Block: "Block 1" } // other language address which can be ignored }; let languagePriority = null const availableLangs = Object.keys(responseData) if (responseData.en) { languagePriority = 'en' } if (!responseData.en && availableLangs.length) { languagePriority = availableLangs[0] } if (languagePriority) { const responseKeys = Object.keys(responseData[languagePriority]) const addressCopy = [...address] responseKeys.forEach(item => { addressCopy.find(addItem => { if (addItem.id === item) { addItem.value = response.en[item] } }) }) setAddress(addressCopy) } // How to update the update of address below?? }, []);