Javascript 如何在使用react无限滚动和react挂钩时删除可重复的API结果

我正在使用react无限滚动组件库和api。我可以获取数据，无限卷轴工作得很好，但我的问题是，由于组件在每个卷轴上都发出请求，所以我得到了可重复的结果

我发现了一种解决方法，可以删除相同的数组，但它不能与infinite scroll包一起正常工作

这是我的代码：

function App() {
  const [people, setPeople] = useState([]);

  const fetchPeopleImages = () => {
    axios.get(`https://randomuser.me/api/?results=30&nat=br`).then((res) => {
      const result = res.data.results;
      setPeople([...people, ...result]);
    });
    // if (people.length > 30) {
    //   const removedDuplicatedPeople = people.filter(
    //     (ele, ind) =>
    //       ind ===
    //       people.findIndex(
    //         (elem) => elem.picture.medium === ele.picture.medium,
    //       ),
    //   );
    //   setPeople([...people, removedDuplicatedPeople]);
    // }
  };

  useEffect(() => {
    fetchPeopleImages();
    // commented below because ESLINT was asking me to use useCallback 
    // inside fetchPeopleImage func. idk why
    // eslint-disable-next-line
  }, []);

  return (
    <div className="App">
      <InfiniteScroll
        dataLength={people.length}
        next={() => fetchPeopleImages()}
        hasMore={true}
        loader={<h4>Carregando...</h4>}
        endMessage={
          <p style={{ textAlign: 'center' }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
      >
        {people.length > 1 &&
          people.map((people, i) => (
            <div>
              <img src={people.picture.medium} alt="Imagem de uma pessoa" />
            </div>
          ))}
      </InfiniteScroll>
    </div>
  );
}

export default App;

评论中提到的是我发现的一种解决方法，即删除具有相同映像链接的阵列。

---

Codesandbox:

理想情况下，不要特别针对scroll之类的频繁抓取执行过滤业务。最好是维护一个状态页面，并将其传递给api，api应该返回数据

您面临的不一致性问题是由于randomuser.me api的限制造成的。api只能提供有限的图像，因此它会混淆名称、年龄、图像等，并尽力提供独特的记录。因此，您经常会看到重复的图像。您可以通过呈现名称和图像进行检查，您将看到两个相同的图像具有不同的名称

解决您的问题的一些建议： -为结果查询参数（例如10）提供一个较低的值 -对api使用种子选项 -在每次滚动时，递增页面并将其传递给api查询参数

看，这在某种程度上是有效的

注意-仍然不能保证看到渲染的唯一图像。但是，您可以使用更新后的代码，当您将其与真实的api一起使用时，它将起作用

更新的代码片段

功能应用程序{ const[people，setPeople]=useState[]； const[page，setPage]=useState0； const fetchPeopleImages==>{ axios .得到`https://randomuser.me/api/?results=10&nat=br&page=${page}&seed=abc` .thenres=>{ const result=res.data.results； 设定人物[…人物，…结果]； setPageprev=>prev+1； }; console.logpage，page； }; useEffect=>{ 获取人物形象； //评论如下，因为ESLINT要求我在内部使用useCallback //fetchPeopleImage函数idk为什么 //eslint禁用下一行 }, []; 回来 fetchPeopleImages} hasMore={true} 加载器={正在加载…} 结束语={

耶！你都看过了

} > {people.length>1&& people.mappeople，i=> {people.name.first}

} ; }

---

你说得对，ramdomuser api让它很难工作。谢谢你抽出时间。