启动页面加载功能

我有一个函数，它在启动时会获取一些数据。这可以通过点击按钮来完成，例如：

<button type="button" onClick={fetchData}>Get data</button>

基本上，它只是由给出的一个函数

function fetchData(e) {
e.preventDefault();
<something POST to get data>
}

所有这些都在按预期进行。但是，只有在单击按钮时才会获取数据。我希望数据也能在加载时提取，这样在点击按钮之前就可以显示一些数据。

我想我可以说：

useEffect(() => {
fetchData()
}, [])

但这似乎并不奏效。然而，如果我获取函数内部的所有内容，并将其替换为useEffect中的fetchData()，那么它就可以工作了。但我不想每次功能需要更新时都换两次东西。

那么我做错了什么？

这是因为在useEffect中调用fetchData()时，不会向函数提供任何参数。然而，在函数中，您期望第一个参数出现，并用e.preventDefault()调用它。由于e将是未定义的，因此尝试访问undefined内的密钥/属性将引发错误。

有两种解决方案：

解决方案1：使用可选链接

通过首先检查e是否为null或未定义，我们可以防止试图访问其上的密钥/属性：

function fetchData(e) {
e?.preventDefault();
// Additional fetching logic
}

如果您还想支持不支持可选链接的浏览器，那么使用逻辑AND操作数(&&(执行延迟求值/短路也可以：

function fetchData(e) {
e && e.preventDefault();
// Additional fetching logic
}

从fetchData函数中完全删除e：

function fetchData() {
// Additional fetching logic
}

并防止点击处理程序级别的默认事件：

const onClick = (e) => {
e.preventDefault();
fetchData();
}
<button type="button" onClick={onClick}>Get data</button>