如何在JSX中重新渲染映射循环

Question

我有一个侧边栏，带有按钮链接，以div id为目标，URL以#id_name结尾。现在，我想使用以下代码在映射循环中呈现与#id_name匹配的数据：

<div>
{entries.map((item, index) => {
if (asPath.endsWith(`#${item.section}`))
return (
<div id={item.section} key={index}>
<h3>{item.title}</h3>
<p>{item.summary}</p>
</div>
);
})}
</div>

如果#id_name与item.section匹配，它可以进行刷新，但如果我单击另一个链接，即使item.section与#id_name匹配，也不会发生任何事情。

当#id_name更改时，如何在不刷新或离开页面的情况下重新渲染映射循环？

Answer 1

如果要重新渲染以工作
asPath或条目应处于useState或redux状态
我认为对于这种情况，asPath更正确。。。尝试使用useEffect和useState

Answer 2

我确实在不使用状态的情况下解决了这个问题。我没有在按钮链接上使用Next Link或<a>，而是使用了useRouter的push。奇怪的是，这是怎么回事。

const router = useRouter();
const handleHref = (link) => {
router.push(link);
};
<Botton onClick={() => handleHref(`#${String(item.section).replace(/ /g, "-")}`)}>{item.section}</Botton>