react 是一个非常流行的前端框架，可以帮助我们高效地构建用户界面。很遗憾。如果我们不能正确使用&&，很容易导致UI错误。

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

1. &&运算符导致的React UI界面错误
2. 如何工作？
3. 我们应该用什么代替&&？

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'))

眼见为实，我的朋友们，所以请点击此Codepen的链接进行查看。

您会注意到，当list是一个空数组时，页面将呈现 0 而不是什么都没有。 我的天哪，这到底是怎么回事？

2.&&是如何工作的？

这是一个React错误吗？谢天谢地，这个问题的原因不是因为React犯了一个错误，它与它本身的工作方式有关Javascript。

提示（来自MDN）：当且仅当所有操作数都为真时，一组布尔操作数的逻辑与 (&&) 运算符（逻辑合取）才为真。否则就是假的。
更一般地，运算符返回从左到右计算时遇到的第一个假操作数的值，或者如果它们都是真值，则返回最后一个操作数的值。

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

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;

翻译来自:https://javascript.plainenglish.io/its-2023-please-stop-using-for-conditional-rendering-in-react-b588a09ebb17

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/12488