Necesito ayuda para cambiar el estado de la matriz de objetos al obtener datos.
Este es mi estado de uso.
const [productData, setProductData] = useState<[{label: string, value: string}]>([{ label: '', value: '', }]);Y esta es la función donde hago una llamada api y cambiaré mi estado tomando de la matriz de objetos el nombre de los productos, así que data.name. Estoy tratando de mapear todos los nombres para poder mostrarlos en un menú desplegable.
const getAllProducts = async () => { try { const { data } = await axios.get(`http://localhost:8300/product/all`); data.map((product: any) => setProductData()); } catch(error) { console.log("Error", error); } };¿Cómo podría hacer esto en React TypeScript? Cambie la etiqueta y el campo de valor con los valores asignados para que pueda mostrarlos en el menú desplegable.
type ProductData = { label: string; value: string; }; const [productData, setProductData] = useState<ProductData[]>([ { label: '', value: '', }, ]); const updateProductData = (newProductData: ProductData[]): void => { setProductData((currentState) => { const draft = newProductData; // mutate your draft however you'd like... return [...currentState, ...draft ]; }); return; }; const getAllProducts = async (): ProductData[] => { const newProductData = await // ... updateProductData(newProductData); return; };Verifique la segunda nota en los documentos de useState
Sin embargo, es posible que useReducer sea más útil.
Ya está realizando una llamada API y obteniendo la respuesta aquí.
const getAllProducts = async () => { try { const { data } = await axios.get(`http://localhost:8300/product/all`); data.map((product: any) => setProductData()); <-- prepare your object here } catch (error) { console.log("Error", error); } };Una vez que obtenga la respuesta, prepare los objetos que se requieren para su menú desplegable. Algo como abajo.
const dropdownValues = data.map((product: any) => ({ id: product.id, label: product.name, value: product.id })); setProductData(dropdownValues); Use ProductData en su etiqueta desplegable.