數組解構中的花括號從函數中返回

Question

我無法理解大括號在返回這個自定義鈎子時是如何工作的（或者他們應該做什么）。 我知道這是解構，我只是不明白對它們的需要。 誰能解釋一下？

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

Answer 1

您基本上是在返回一個數組，該數組在第 0 個索引處包含一個 Object，在第二個索引處包含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>;
};

---

這是供您參考的工作演示。