为什么我的状态迭代会被覆盖？

Question

嗨，所以我不确定为什么钩子中的项目会被覆盖，而仅保留最后一个值。

直到我遍历xml的地步，一切正常。 setCampgrounds()挂钩未保存所有迭代。我本以为...campgrounds扩展会复制以前的迭代，因此不会被覆盖。在循环中是否有我不了解的东西，或者将这些项目保存在露营地挂钩中的正确方法是什么？

const [campgrounds, setCampgrounds] = useState([]);
    
useEffect(() => {
        url = some url...
        axios.get(url)
            .then(res => res.data)
            .then((str) => {
                let newXML = new DOMParser().parseFromString(str, "text/xml");
                let results = newXML.getElementsByTagName("result");
                for (let i = 0; i < results.length; i++) {
                    setCampgrounds([...campgrounds, {
                        facilityID: results[i].getAttribute("facilityID"), 
                        facilityName: results[i].getAttribute("facilityName"),
                        contractID: results[i].getAttribute("contractID")
                    }]);   
                }
            })
            .catch(err => {
                console.log(err);
            })
            
    }, []);

Answer 1

问题

campgrounds是您要排队的每个状态更新的当前状态值，因此每个更新都将被下一个覆盖，而最后一个要设置状态的更新将是持久性更新。

解决方案

使用功能状态更新来加入每个更新。每个排队的更新都使用先前更新的结果状态。

Functional Updates

const [campgrounds, setCampgrounds] = useState([]);

...

for (let i = 0; i < results.length; i++) {
  setCampgrounds(campgrounds => [
    ...campgrounds,
    {
      facilityID: results[i].getAttribute("facilityID"),
      facilityName: results[i].getAttribute("facilityName"),
      contractID: results[i].getAttribute("contractID")
    }
  ]);
}