useState 對象數組

Question

我有一個搜索框，可以從 Excel 中復制和粘貼一列。 我解析輸入並生成一個條目數組。

然后我映射條目並調用每個項目的自定義鈎子以從我的graphql端點獲取一些數據。

例如：

搜索框中提供了 3 個條目：

["D38999/26", "LJT06RE25-61PA", "D38999/46FJ61AA"]

fetchData函數一次接收這些項目之一作為查詢參數。 目前，此過程將返回 3 個單獨的對象，如下所示：

{query: "D38999/26", cables: Array(35)}
{query: "LJT06RE25-61PA", cables: Array(1)}
{query: "D38999/46FJ61AA", cables: Array(1)}

如何設置反應鈎子以允許我將每個對象作為對象數組附加到result狀態中？

我的最終目標是像這樣的對象數組：

[
{query: "D38999/26", cables: Array(35)},
{query: "LJT06RE25-61PA", cables: Array(1)},
{query: "D38999/46FJ61AA", cables: Array(1)}
]

這是我當前用於解析 API 端點的自定義鈎子

const useCableMatch = () => {
  const [result, setResult] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const client = useApolloClient();

  const fetchData = async query => {
    setIsError(false);
    setIsLoading(true);
    try {
      const { data } = await client.query({
        query: GET_VALID_CABLE,
        variables: { pn: `%${query}%` },
      });

      const response = { query, ...data };
      console.log('response:', response);

      setResult(response);
    } catch (error) {
      setIsError(true);
    }
    setIsLoading(false);
  };

  return [{ result, isLoading, isError }, fetchData];
};

當前setResult設置為僅從響應中返回單個對象。 我想返回一個數組，其中生成的每個對象都附加到現有的對象數組中。

Answer 1

假設可以將response直接添加到result數組中，您可以：

setResult(result => [...result, response]);

這將通過使用array spread operator附加來自先前result狀態的新response 。

Answer 2

您可以將整個數組傳遞給鈎子並將結果作為數組返回。 您還應該將useEffect用於異步邏輯。 我重寫了您的代碼以一次處理所有 3 個字段：

const useCableMatch = (searchInput) => {
  const [result, setResult] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const client = useApolloClient();

  useEffect((searchInput) => {
     setIsError(false);
     setIsLoading(true);
     let response
     for(let field of searchInput){
        try {
           const { data } = await client.query({
              query: GET_VALID_CABLE,
              variables: { pn: `%${field}%` },
           });

           response = { ...data };
         } catch (error) {
             setIsError(true);
         }
     }
     setResult(current => {query, ...current, ...response);
     setIsLoading(false);
   };
  }, [searchInput])

  return [{ result, isLoading, isError }];
};