通过变异添加新列表项后，滚动到无序列表上的列表项

Question

我有来自 apollo 查询的列表数据。查询获取所有数据，ul 用于显示列表。理想情况下，我有一个按钮可以将新项目添加到列表的末尾，按下该按钮并添加新项目后，我想滚动到列表中的项目。我的代码如下。

const { data } = useQuery(getData);

<ul id="itemList">
    {data.map(item=> <li key={item.id} id={item.id}>{item.title}</li> )
</ul>

在页面的其他地方，我有一个按钮，您可以单击它来使用 apollo 变异挂钩，它会向列表中添加一个新项目并重新获取 getData 查询。

const [createListItem, { loading, error }] = useMutation(createItem);

const resp = await createListItem({variables: {details: {title: "New Item"}}, refetchQueries: [{query: getData}]

我假设完成此操作并将项目添加到列表中（我可以清楚地看到），我可以使用下面的代码以编程方式滚动到列表中的项目。将此项目添加到后端数据库后，我的数据库会自动添加 ID (MongoDB)。

const listItem = document.getElementById(resp.data.createListItem.id);
listItem?.scrollIntoView({ behavior: "smooth" });

listItem 变量显示为空。这很可能是由于 DOM 在我尝试滚动到该项目之前没有刷新。如果我硬编码一个已经存在的 id（除了我新创建的 id），自动滚动会起作用。

如何在添加后获取新创建项目的 li 文档并查询重新获取然后滚动到它？是否有“onchange”事件或类似的事件，我可以使用 addEventListener 来搜索列表中我新创建的项目，然后滚动到它？

谢谢

Answer 1

我明白了。感谢 componentDidUpdate 建议。我使用 React Hooks（useEffect 和 useState）做到了这一点。

参考我上面的原始问题，一旦我使用突变挂钩添加项目，我就会将新添加项目的 ID 存储在状态中

const [addedItem, updateAddedItem] = useState("")

所以参考上面有问题的代码。

const resp = await createListItem({variables: {details: {title: "New Item"}}, refetchQueries: [{query: getData}]

updateAddedItem(resp.data.createListItem.id)

在我呈现列表的组件中，我使用了 useEffect 挂钩。

  useEffect(() => {
        const listItem = document.getElementById(addedItem);
        listItem?.scrollIntoView({ behavior: "smooth" });
      }
    }
  }, [data]);

这样，当数据更新时，列表项可以在 DOM 中滚动到。

通过变异添加新列表项后，滚动到无序列表上的列表项

Scroll to List Item on Unordered List after new list item is added through mutation

html

dom

reactjs

apollo-client