javascript - useState 对象数组

Question

我有一个搜索框，可以从 Excel 中复制并粘贴列。我解析输入并生成一个条目数组。

然后，我映射条目并调用每个项目的自定义 Hook ，以从我的 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)}

如何设置 react 钩子(Hook)以允许我将每个对象作为对象数组附加到结果状态中？

我的最终目标是像这样的对象数组:

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

这是我当前用于解析 API 端点的自定义 Hook

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 .