React中在循环内使用hook的替代实现方案是什么？

React Hook的规则要求必须在组件顶层固定顺序调用，针对你的场景有3种通用落地方式： #

方案1：抽离独立子组件（最推荐，100%符合Hook规则） #

你可以把每个选中条目的处理逻辑封装为单独的子组件，在子组件顶层调用useSomething，需要拿到处理结果的话可以通过回调或者状态提升回传。
改后的代码示例：

import { useSomething } from "third-party-library"
import { useCallback, useState, useEffect } from "react";

// 抽离的子组件，每条选中的thing对应一个实例
const SelectedThingHandler = ({ thing, onProcessed }) => {
  // 合规：在组件顶层调用Hook
  const extendedThing = useSomething(thing);

  // 组件挂载/extendedThing更新时把结果回传给父组件
  useEffect(() => {
    onProcessed(thing.id, extendedThing);
  }, [extendedThing, thing.id, onProcessed]);

  // 该组件不需要渲染可见内容，返回null即可
  return null;
};

const MyComponent = ({ things }) => {
  const [selectedThings, setSelectedThings] = useState([]);
  const [processedThings, setProcessedThings] = useState({});

  const handleProcessed = useCallback((thingId, extended) => {
    setProcessedThings(prev => ({...prev, [thingId]: extended}));
  }, []);

  const callback = useCallback(() => {
    // 这里直接拿已经处理好的所有extendedThing执行后续操作即可
    Object.values(processedThings).forEach(extendedThing => {
      // 你的后续业务逻辑
    })
  }, [processedThings])


  return (
    <>
      {/* 渲染所有选中条目的处理子组件 */}
      {selectedThings.map(thing => (
        <SelectedThingHandler 
          key={thing.id} 
          thing={thing} 
          onProcessed={handleProcessed} 
        />
      ))}

      {things.map((thing) => (
        <button
          onClick={() => {
            setSelectedThings([...selectedThings, thing]);
          }}
        >
          Select {thing.id}
        </button>
      ))}

      <button onClick={callback}> DONE </button>
    </>
  );
};

方案2：确认useSomething是否为纯函数 #

如果这个第三方Hook内部没有调用任何React原生Hook（useState/useEffect/useContext等），那它本质就是普通工具函数，不用受Hook规则限制，你直接在循环里调用也不会有问题，可先查看该Hook的源码或官方说明确认。 #

方案3：使用第三方库提供的非Hook版本API #

很多第三方库都会同时提供Hook和普通函数两种调用方式，你可以查询文档有没有getSomething这类非Hook的同名方法，直接在循环里调用这个普通方法即可。

内容的提问来源于stack exchange，提问作者joepegler