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

Question

我正在使用react-infinite-scroll-component库和randomuser.me api。我可以获取数据，无限滚动可以正常工作，但问题是，由于组件在每个滚动中都发出请求，所以我得到了可重复的结果。

我找到了一个解决办法，可以删除相同的数组，但在无限滚动包中不能正常工作。

这是我的密码：

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;

注释的是我找到的删除具有相同图像链接的数组的解决方法。代码框：https://codesandbox.io/s/gracious-wildflower-opjx5?file=/src/App.js

Answer 1

理想情况下，不要特别使用频繁获取(如滚动)进行过滤业务。如果您维护一个状态，比如page并将它传递给您的api，情况会更好，并且api应该返回数据。

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

解决问题的一些建议：-向results查询param提供一个低值，例如10 -使用api的seed选项-在每个滚动增量page上，并将其传递给api查询param。

参见更新了这里的演示 -它在某种程度上起作用

注意事项-您仍然不能保证看到唯一的图像呈现。但是，您可以使用更新的代码，当您将它与真正的api一起使用时，它将工作。

更新的代码片段

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

  const fetchPeopleImages = () => {
    axios
      .get(`https://randomuser.me/api/?results=10&nat=br&page=${page}&seed=abc`)
      .then(res => {
        const result = res.data.results;
        setPeople([...people, ...result]);
        setPage(prev => prev + 1);
      });
    console.log("page", page);

  };

  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>Loading.....</h4>}
        endMessage={
          <p style={{ textAlign: "center" }}>
            <b>Yay! You have seen it all</b>
          </p>
        }
      >
        {people.length > 1 &&
          people.map((people, i) => (
            <div key={i}>
              <img src={people.picture.medium} alt="Person" />
              <p>{people.name.first}</p>
            </div>
          ))}
      </InfiniteScroll>
    </div>
  );
}