Reactfunction只接受UseEffect循环中的最后一个元素。

使用额外的状态变量单独存储每个循环中的值，并在函数组件之外使用一个useEffect来监听该状态变量的变化。例如：

import React, { useState, useEffect } from "react";

const App = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch("https://jsonplaceholder.typicode.com/todos");
      const data = await result.json();
      setItems(data);
    };

    fetchData();
  }, []);

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
};

const Item = ({ item }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${item.id}`
      );
      const data = await result.json();
      setData(data);
    };

    fetchData();
  }, [item.id]);

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data.title}</div>;
};

export default App;

这种方法将在每次循环时创建一个新的Item组件，使得每个组件都可以独立地处理其自身的数据加载。同时，在父组件中使用useEffect来监控整个状态的变化，确保每个子组件获取到的数据是准确的。