使用 React 时最常见的错误

迈不过友情╰ 2023-09-26 21:46 19阅读 0赞

为初始状态设置不正确的值类型  
一个常见的错误是将对象或数组的初始状态值设置为null空字符串，然后在渲染期间尝试访问该值的属性。同样，不为嵌套对象提供默认值并尝试在渲染方法或其他组件方法中访问它们可能会导致问题。

考虑一个UserProfile我们从 API 获取用户数据并显示包含用户名的问候语的组件。

jsx  
复制  
import \{ useEffect, useState \} from “react”;

export function UserProfile() \{  
const \[user, setUser\] = useState(null);

useEffect(() => \{  
fetch(“/api/profile”).then((data) => \{  
setUser(data);  
\});  
\}, \[\]);

return (

Welcome, \{user.name\}

);  
\}  
尝试呈现此组件将导致错误：无法读取 null 的属性“名称”。

将初始状态值设置为空数组然后尝试从中访问第 n 项时，会出现类似的问题。当通过 API 调用获取数据时，组件会呈现提供的初始状态。null尝试访问或元素的属性undefined将导致错误。因此，确保初始状态紧密代表更新后的状态至关重要。在我们的示例中，正确的状态初始化应该是：

jsx  
复制  
import \{ useEffect, useState \} from “react”;

export function UserProfile() \{  
const \[user, setUser\] = useState(\{ name: “” \});

useEffect(() => \{  
fetch(“/api/profile”).then((data) => \{  
setUser(data);  
\});  
\}, \[\]);

return (

Welcome, \{user.name\}

// Renders without errors

);  
\}  
这种方法适用于上面的简单示例。但是，为状态值提供默认值可能并不总是实用的，尤其是在处理大型对象时。在这种情况下，可以推迟组件的渲染，直到数据被获取。实现此目的的一种方法是使用加载状态初始化组件并显示加载器，直到数据被获取并准备好呈现（或直到数据获取期间发生错误）。

jsx  
复制  
import \{ useEffect, useState \} from “react”;

export function UserProfile() \{  
const \[user, setUser\] = useState(null);  
const \[isLoading, setIsLoading\] = useState(true);

useEffect(() => \{  
fetch(“/api/profile”)  
.then((data) => \{  
setUser(data);  
\})  
.catch((error) => \{  
// Handle the error  
\})  
.finally(() => \{  
setIsLoading(false);  
\});  
\}, \[\]);

if (isLoading) \{  
return

Loading…

;  
\}

return (

Welcome, \{user?.name\}

);  
\}  
我们还使用一个可选的链接运算符来防止在返回的数据是null. 但是，仍然需要额外的错误处理，因为在这种情况下，组件将显示没有名称的问候语。

请注意，我们在方法中重置了加载状态finally，无论获取操作是否成功，它都会将其删除。这确保加载状态总是在异步操作完成后重置。

如果您正在寻找有关如何成为自学成才的开发人员的一些指导，您可能会发现这篇文章很有帮助：关于成为自学成才的开发人员的提示。

直接修改状态  
React 的状态被认为是不可变的，不应该直接改变。相反，使用钩子中的 setter 函数useState。此外，在更新非原始值（例如存储在状态中的对象或数组）时，我们需要为它们提供不同的对象引用（也称为指针）。否则，React 将无法识别状态已更改并且不会更新 UI。

使用简单数组  
考虑一个例子，我们有一个可以添

使用 React 时最常见的错误

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关使用Java编译器javac时的常见错误

相关使用Java并发编程时的常见错误示例

相关使用Spring Boot时遇到的常见配置错误

相关使用 React 时最常见的错误

相关使用 React 时最常见的错误

相关一个React初学者的常见错误

相关 React中常见错误集锦

相关使用React Hooks 时要避免的5个错误！

相关 react中常见错误收集

相关 React native开发中常见的错误