0是恶魔，请远离它

React 是一个非常流行的前端框架，可以帮助我们高效地构建用户界面。

很遗憾。 如果我们不能正确使用&&，很容易导致UI错误。

现在是 2023 年，我们需要知道：

React && 运算符引起的 UI 界面错误

如何工作？

我们应该用什么来代替&&？

1.# React &&操作符引起的UI界面错误

我经常需要编写需要从服务器端获取数据的页面，该数据用于呈现列表。 如果数据长度为0，则不应显示。

const App = () => {
  const [list, setList] = React.useState([]);
  const fetchList = () => {
    // Simulate fetching data from the server via setTimeout
    setTimeout(() => {
      setList([])
    }, 1000)
  }

  React.useEffect(() => {
    fetchList()
  }, [])
  return (
    list.length && (
      <div className="name-list-container">
        {list.map((name) => {
          return <div className="name-list-item">{name}</div>;
        })}
      </div>
    )
  );
};
ReactDOM.render(<App />, document.getElementById('app'))

您会注意到，当 list 为空数组时，页面将呈现 0 而不是什么都不呈现。

天哪，这到底是怎么回事？

2.# && 是如何工作的？

这是 React 的 bug 吗？ 值得庆幸的是，这个问题的原因并不是因为 React 犯了错误，而是与 Javascript 本身的工作方式有关。

提示（来自 MDN）：一组布尔操作数的逻辑 AND (&&) 运算符（逻辑合取）当且仅当所有操作数都为 true 时才为 true。 否则就是假的。

更一般地，该运算符返回从左到右计算时遇到的第一个假操作数的值，或者如果它们都是真值，则返回最后一个操作数的值。

让我们学习一个非常简单的例子，我想你会很快理解的。

const a = 0
const b = "React"
const c = 1
const d = "Javascript"

console.log(a && b) // 0
console.log(c && d) // Javascript

当你在代码中使用a && b时，如果a为0，则直接返回，不再计算b的值。

哦，你一定已经明白为什么上面的 React 例子显示为 0 了。

3.# 我们应该用什么来代替&&？

&&操作符很容易出错，那么我们是否应该放弃使用它呢？

不，我们不应该这样做。 我们可以尝试这3种方法来避免这个问题。

3.1 使用 !!list.length

我们可以将数组的长度转为布尔值，这样的错误就不会再出现了。

// 1. Convert list.length to boolean
!!list.length && <Component list={list} />

3.2 使用 list.length >= 1

和上面的原理一样，我们用另一种方式将其转为布尔值。

// 2. Controlled by specific logic
list.length >= 1 && <Component list={list} />;

3.3 使用三元表达式

如果您的应用程序不是特别复杂并且可以仅使用 1 或 2 个三元表达式来解决，我会推荐它。

// 3. Use ternary expressions and null
list.length ? <Component list={list} /> : null;

结尾

这就是这篇文章的全部内容！ 我期待与您成为朋友，请关注我，我会关注您。