Javascript 函数返回的数组反结构中的花括号

我不明白在这个定制挂钩的返回中，花括号是如何工作的（或者它们应该做什么）。我知道这是在破坏结构，我只是不明白它们的必要性。有人能解释一下吗

const useHackerNewsApi = () => {
  const [data, setData] = useState({ hits: [] });
  const [url, setUrl] = useState(
    'https://hn.algolia.com/api/v1/search?query=redux',
  );
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios(url);
        setData(result.data);
      } catch (error) {
        setIsError(true);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [url]);
  return [{ data, isLoading, isError }, setUrl];
}

---

基本上，您返回的数组包含第0个索引处的对象和第二个索引处的

setUrl

方法

返回值将隐式转换为：

[{
  data: data,
  isLoading: isLoading,
  isError: isError
}, setUrl]

这就是为什么您可以在组件中这样使用它：

import React, { useState } from "react";
import { useHackerNewsApi } from "./useHackerNewsAPI";

export default ({ name }) => {
  const [{ data, isLoading, isError }, setUrl] = useHackerNewsApi();
  return <h1>
    <pre> Data - { JSON.stringify(data) }</pre>
    <pre> isLoading - { isLoading }</pre>
    <pre> isError - { isError }</pre>
  </h1>;
};

import React，{useState}来自“React”；
从“/usehakernewsapi”导入{usehakernewsapi}”；
导出默认值（{name}）=>{
const[{data，isLoading，isError}，setUrl]=useHackerNewsApi（）；
返回
Data-{JSON.stringify（Data）}
isLoading-{isLoading}
isError-{isError}
;
};

---

这是给你的裁判的一封信

---

这不是解构，它只是返回一个数组，并在第一个元素将

数据

、

isLoading

和

isError

组合到一个对象中，但对象中的属性不是解构的吗？或者它们会变成{data:data}等吗？它们会变成

{data:data}

这是ES6对象属性的简写符号