如何使用钩子遍历数组并保存数据

Question

想法是遍历数组并保存（或更新）值。

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]);

输出为：

The skill is:  1  and value:  30
The skill is:  2  and value:  40
The skill is:  3  and value:  90

没关系，我认为“技能”应该是：

{1: 30, 2: 40, 3: 90}
   1: 30
   2: 40
   3: 90

但实际上，它只保存了最后一次输入。我的意思是，我看到以下内容：

{3: 90}
   3: 90

拜托，有人可以解释为什么吗？以及如何以正确的方式做到这一点？谢谢！！！

Answer 1

一开始技能是array of objects，但你在循环中将其更改为single object，这就是为什么你只看到状态

中的最后输出的原因

这应该可以解决您的问题

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]);

虽然我建议将新值保存在一个临时数组中，然后更改状态一旦这将摆脱不必要的 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]);

Answer 2

你可以这样做：

const [skills, setSkills] = useState([])

useEffect(() => {
  setSkills([
    ...skills,
    ...Object.entries(json_h).map(([k, v]) => ({[k]: v})),
  ])
}, [json_h])

如何使用钩子遍历数组并保存数据

How to iterate over array and save data using hooks

javascript

arrays

react-hooks

use-effect

use-state