Quiero actualizar el valor de la matriz de categorías/insertar categorías json en datos después de obtener categorías de DB. ¿Pero no puede encontrar el camino correcto? Nota: compruebe la función loadCategories.
import React, {useEffect, useState} from "react"; import {getCategories} from "../../../Functions/Categoy"; const initialState = { title:"", desc:"", colors:["Black", "Brown", "Silver", "White", "Blue"], categories:[] // here to insert } const CreateProducts = () => { const [data, setData] = useState([initialState]); const { title, desc, colors, categories } = data useEffect(() => { loadCategories(); }, []) const loadCategories = () => { getCategories() .then((res) => { // here I want to insert/update categories value // setData({ prevState => [...prevState, categories : res.data] }) }) }; return ( <div>{JSON.stringify(categories)}</div> )} export default CreateProducts;"Categoy" es probablemente un error tipográfico? Debería ser "Categoría".
No es necesario agregar initialState en una matriz para useState .
async/await hace que la vida sea un poco menos complicada cuando se trabaja con datos devueltos por fetch . Puede agregar una función asíncrona a useEffect y hacer que obtenga sus datos, los analice y luego actualice el estado de su componente.
Luego puede map las categorías en el estado (o lo que quiera hacer) para producir su JSX.
Un ejemplo actualizado.
import React, {useEffect, useState} from 'react'; import {getCategories} from '../../../Functions/Category'; const initialState = { title: '', desc: '', colors: ['Black', 'Brown', 'Silver', 'White', 'Blue'], categories: [] }; function CreateProducts() { const [data, setData] = useState(initialState); useEffect(() => { async function loadCategories() { const res = await getCategories(); const categories = await res.json(); setCategories({ ...data, categories }); } loadCategories(); }, []) return ( <div> {data.categories.map(category => <div>{category}</div>)} </div> ); } export default CreateProducts;prueba esto en su lugar
import React, {useEffect, useState} from "react"; import {getCategories} from "../../../Functions/Categoy"; const initialState = [] const CreateProducts = () => { const [data, setData] = useState(initialState); useEffect(() => { loadCategories(); }, []) const loadCategories = () => { getCategories() .then((res) => { setData([...data,...res.data]) }) }; return ( <div>{JSON.stringify(data)}</div> )} export default CreateProducts;