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

【问题标题】：Scroll to List Item on Unordered List after new list item is added through mutation通过突变添加新列表项后，滚动到无序列表上的列表项
【发布时间】：2021-07-01 15:12:55
【问题描述】：

我有来自 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}]

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

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

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

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

谢谢

【问题讨论】：

如果您使用的是class 组件，请尝试在componentDidUpdate 方法中添加scrollIntoView 代码。
我试过这个。我使用反应钩子。我尝试使用 useEffect 钩子来重新渲染变量更改。那也没有用。 useEffect(()->{},[stateVariable]) stateVariable 是我在创建后存储项目详细信息的地方。在 useEffect 中，stateVariable 在更新时会触发重新渲染。即便如此， ul 还是落后了一步。我需要刷新窗口才能滚动滚动。它不是即时的。我正在寻找一种方法来在动态添加 li 时触发我的 ul 更新，然后列表项可用，因此使用上面的代码滚动到它。

标签： html reactjs dom apollo-client

【解决方案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 中滚动到。

【讨论】：