reactjs 如何重构我的代码以修复在循环内部调用React钩子时的es-linting警告？

t9eec4r0 于 2023-05-06 发布在 React

关注(0)|答案(1)|浏览(160)

所以我现在有两个定制的钩子。一个返回团队ID数组，另一个接受一个团队ID作为参数并返回团队的所有数据。
我想循环遍历团队ID数组，并将每个ID传递给获取数据的钩子。但是我得到了一个eslint错误**“React Hooks必须在每个组件渲染中以完全相同的顺序调用。”**。有谁知道如何重构我的代码，这样我就可以避免这个警告？我知道你不应该在循环内部调用React钩子，但不知道如何完成我需要的。
我也试过将两个钩子组合成一个钩子，但这给了我同样的错误，因为在useGetTeamData中，我需要利用apollo框架中的UseQuery钩子，所以我将再次在循环中调用钩子。
这是我的父组件，它调用这两个钩子

import * as React from "react";
import { useGetTeamIds, useGetTeamData } from "../../hooks";

const teamIds = useGetTeamIds(); // ex: ["21", "25", "55", "63"];
const collection_of_teamData = [];
for (const id of teamIds) {
    collection_of_teamData.push(useGetTeamData(id));
}

// Do something with collection of team data here

reactjs

来源：https://stackoverflow.com/questions/76158754/how-to-refactor-my-code-to-fix-es-linting-warning-when-calling-a-react-hook-insi

1条答案

按热度按时间

5lhxktic1#

既然你已经指出你不能重构useGetTeamData()来接受多个id，一个选择是声明一个子组件，它接受一个id作为prop，然后根据需要在顶层调用useGetTeamData()。这仍然保持父级中集合的控制，但将单个元素的控制委托给子级。

import * as React from 'react';
import { useGetTeamIds, useGetTeamData } from '../../hooks';

function Teams() {
  const teamIds = useGetTeamIds(); // ex: ["21", "25", "55", "63"];

  return (
    <div>
      {teamIds.map((id) => (
        <Team key={id} id={id} />
      ))}
    </div>
  );
}

function Team({ id }) {
  const teamData = useGetTeamData(id);

  return (
    <div>
      <H1>{teamData.name}</H1>
    </div>
  );
}

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 如何重构我的代码以修复在循环内部调用React钩子时的es-linting警告？

1条答案

相关问题

热门标签

最新问答