La idea es iterar sobre una matriz y guardar (o actualizar) valores.
const [skills, setSkills] = useState([]); useEffect(() => { Object.entries(array).forEach(([k, v]) => { console.log("The skill is: ", k, " and value: ", v) setSkills({ ...skills, [k]: v }) }); }, [array]);La salida es:
The skill is: 1 and value: 30 The skill is: 2 and value: 40 The skill is: 3 and value: 90Eso está bien y asumo que las "habilidades" deberían ser:
{1: 30, 2: 40, 3: 90} 1: 30 2: 40 3: 90pero en realidad, solo guarda la última entrada. Quiero decir, veo lo siguiente:
{3: 90} 3: 90Por favor, alguien puede explicar por qué? ¿Y cómo hacerlo de la manera correcta? ¡¡¡Gracias!!!
Las habilidades son array of objects al principio, pero las cambia a un single object en el bucle, por eso solo ve la última salida en el estado
esto debería solucionar tu problema
useEffect(() => { Object.entries(json_h).forEach(([k, v]) => { console.log("The skill is: ", k, " and value: ", v) setSkills([ ...skills, {[k]: v} ]) // notice changes here }); }, [json_h]);aunque sugiero guardar los nuevos valores en una matriz temporal y luego cambiar el estado una vez que esto eliminará las llamadas innecesarias a setState
useEffect(() => { let tempArr = []; Object.entries(json_h).forEach(([k, v]) => { console.log("The skill is: ", k, " and value: ", v) tempArr.push({[k]: v}) }); setSkills([...skills, ...tempArr]) }, [json_h]);Tu puedes hacer:
const [skills, setSkills] = useState([]) useEffect(() => { setSkills([ ...skills, ...Object.entries(json_h).map(([k, v]) => ({[k]: v})), ]) }, [json_h])