React 的常见初学者错误
这是我关注的一位前端开发者的分享，分享的非常棒！值得被更多人看到，原文英文版本，我做了翻译，希望对 React 开发者有所帮助。
在我最近开发的时候，在遇到复杂状态管理和副作用的时候，就会经常不能完全想到所有可能发生的情况，导致一些莫名其妙的 bug，如果你也是，那看完吧，一定有新的收获。以下是正文部分：
“几年前，我在当地的一个编码训练营教 React，我注意到有一些事情让学生措手不及。人们不断掉进同一个坑里！在本教程中，我们将探索 8 个最常见的陷阱。您将学习如何绕过它们，并希望能够避免很多挫败感。为了保持这篇博客文章轻松流畅，我们不会过多探讨这些陷阱背后的原因。这更像是一个快速参考。下面看下常见的问题吧！
目标受众
这篇文章是为那些对React基础知识已经有所了解，但在他们的学习旅程中仍然处于初级阶段的开发者编写的。
1. 使用 0 作为判断依据
好的，我们从其中一个最普遍的陷阱开始。我在一些生产应用程序中实际遇到过这个问题！
请看下以下代码：
// react app.js import React from 'react'; import ShoppingList from './ShoppingList'; function App() { const [items, setItems] = React.useState([]); return ( <div> {items.length && <ShoppingList items={items} />} </div> ); } export default App;
// ShoppingList.js import React from 'react'; function ShoppingList({ items }) { return ( <> <h1>Shopping List</h1> <ul> {items.map((item, index) => { // NOTE: We shouldn't use “index” as the key! // This is covered later in this post 😄 return ( <li key={index}> {item} </li> ); })} </ul> </> ); } export default ShoppingList
我们的目标是有条件地显示一个购物清单。如果数组中至少有1个项目，我们应该渲染一个ShoppingList元素。否则，我们不应该渲染任何内容。然而，我们最终在 UI 中得到一个随机的 0 ！
发生这种情况是因为 items.length 的计算结果为 0 。由于 0 在 JavaScript 中是一个虚假值，因此 && 运算符短路，整个表达式解析为 0 。实际上，就好像我们这样做了一样：
function App() { return ( <div> {0} </div> ); }
与其他假值（如''、null、false等）不同，数字0是JSX中的一个有效值。毕竟，在许多情况下，我们确实希望打印数字0！
如何修复： 我们的表达式应该使用一个“纯粹”的布尔值（true/false）：
function App() { const [items, setItems] = React.useState([]); return ( <div> {items.length > 0 && ( <ShoppingList items={items} /> )} </div> ); } items.length > 0 将始终计算为 true 或 false ，因此我们永远不会有任何问题。或者，我们可以使用三元表达式： function App() { const [items, setItems] = React.useState([]); return ( <div> {items.length ? <ShoppingList items={items} /> : null} </div> ); }
items.length > 0 将始终计算为 true 或 false ，因此我们永远不会有任何问题。或者，我们可以使用三元表达式：
function App() { const [items, setItems] = React.useState([]); return ( <div> {items.length ? <ShoppingList items={items} /> : null} </div> ); }
