React中使用点符号出现‘cannot read properties of null’错误的原因与解决

核心原因：初始渲染时quote为null，异步请求未完成前无法访问属性 #

• 你给quote的初始状态设为null：const [quote, setQuote] = useState(null);，React第一次渲染组件时，quote就是null。传统点符号quote.text会直接尝试从null上读取属性，但null是没有任何属性的原始值，JavaScript会直接抛出"cannot read properties of null"的错误。
• useEffect里的API请求是异步操作，它会在组件首次渲染完成后才开始执行，要等API返回数据后才会调用setQuote(json[0])更新quote的状态。在这之前，组件已经完成了第一次渲染，此时quote还是null，直接用点符号访问属性必然报错。

可选链操作符?.为什么能解决问题？ #

quote?.text会先做一层判断：如果quote是null或undefined，就直接返回undefined，不会继续尝试读取text属性，自然就不会触发错误。当API返回数据、quote被更新为有效对象后，它又能正常读取对应的属性值。

额外的解决思路：条件渲染 #

除了可选链，你也可以通过条件判断来避免错误，比如：

{quote && <h3>{quote.text}</h3>}
{quote && <i>- {quote.author}</i>}

只有当quote存在（非null/undefined）时，才渲染对应的内容。

内容的提问来源于stack exchange，提问作者chose