做出反应，如何防止无事件的setState默认

Question

假设您有一个已定义的函数，该函数在react组件中包含一个this.setState，而该事件不会触发该事件。

如何preventDefault()才能使当前滚动显示在页面上？

我创建了一个沙箱来说明这种行为：

https://codesandbox.io/embed/damp-night-r92m5?fontsize=14&hidenavigation=1&theme=dark

定义组并触发渲染器时，页面将在顶部滚动。不会发生这种情况，未定义id组或包含空数组...

如何防止这种滚动

Answer 1

首先，我认为您的问题与event无关，但是您的组件正在触发渲染。 根据提供的沙箱，实际上每次组件渲染时都要声明一个新数组。这意味着即使数组中的所有项目都相同，React也会假设您的[{ id: 1, content: "group1" }, { id: 2, content: "group2" }]是一个新实例。

此行引起您的问题：

groups={[{ id: 1, content: "group1" }, { id: 2, content: "group2" }]}

方法1：将groups变量移至状态

const [groups, setGroups] = useState([{ id: 1, content: "group1" }, { id: 2, content: "group2" }]);

这样，直到您调用App（在这种情况下为setState），React才会重新呈现您的setGroups

方法2：将groups移出App函数之外

const groups = [{ id: 1, content: "group1" }, { id: 2, content: "group2" }];

function App() {
 ... App Codes
}

这样，由于App不在groups中声明，因此React不会重新渲染您的App。

方法3：使用记忆useMemo React Hook

const groups = useMemo(() => [{ id: 1, content: "group1" }, { id: 2, content: "group2" }], []);

useMemo函数中的第二个参数定义了依赖项数组，将其设置为空数组意味着该值将永远不变。因此，React不会重新呈现您的App。

---

在渲染中：

groups={groups}