在反应中，对象似乎是使用 fetch 的空对象答案

【问题标题】：In react, object is seems to be as an empty object for using fetch在反应中，对象似乎是使用 fetch 的空对象
【发布时间】：2020-08-08 09:15:14
【问题描述】：

如果我在函数中使用变量而不是使用反应状态对象，那么获取的行为会很奇怪。如果我删除了 const 响应.....和 const data.... 行的东西工作得很好，但如果我使用 fetch 函数并使用普通变量而不使用状态，这不起作用。这是为什么呢？

Object is showing normal if i log it from inside the function

Object is also showing normal if i use const variable

Object is showing like an empty object if i log it from outside the function

但是这段代码工作得很好..

   const [services, setServices] = useState([]);

   useEffect(() => {
    const API_URL = "http://localhost:8080/getServiceName/3";

    const loadData = async () => {
        const apiData = [];
        const response = await fetch(API_URL);
        const data = await response.json();

        data.services.map(service => (
            apiData.push(service.service_name)
        ));
        setServices(apiData);
    }
    loadData();
   }, [location])

请注意，我可以为 const 变量添加更多值（代码中的 const dummyLocation{in image} 和 const apiData）！，如何？？

【问题讨论】：

请编辑您的问题并具体描述每次尝试的结果
这能回答你的问题吗？ How do I return the response from an asynchronous call?
当您尝试扩展对象时，您自己表明它确实在 console.log 中有数据。它在非扩展视图中显示为空白，因为 console.log 是同步的，并且在执行时它不包含任何数据。当异步调用 get resolved 时，它会用所有数据填充 dummyLocation。

标签： reactjs javascript-objects

【解决方案1】：

loadData(); 是异步的，所以如果你这样做

loadData()
console.log(dummyLocation)

那么console.log 将在loadData 完成之前发生。你可能只是想做

loadData().then(() => console.log(dummyLocation))

关于你为什么可以这样做的问题：

const apiData = [];
// ...
apiData.push(service.service_name)

原因是 const 并不意味着变量不能改变（本身），而是变量永远不会被重新分配 - 你不能这样做：

const apiData = [];
apiData = [service.service_name];

因为它正在为其分配一个新数组。

【讨论】：

所以当我使用状态时，它会检查值是否改变并保持更新，这就是为什么我可以在这种情况下使用状态？