请停止在 React 中使用“&&”进行条件渲染

开发 前端
React 是一个目前流行的前端框架之一,可以帮助我们高效地构建用户界面。

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

但是在使用React进行开发时,我们却不能正确使用&&,很容易导致UI错误。

因此,我们需要知道,&&运算符导致的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'))

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

地址:https://codepen.io/qianlong/pen/BarvKbW?editors=1010

你会注意到,当 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;

结尾

以上这就是这篇文章的全部内容!如果你觉得有用的话,请点赞我,关注我,你将会阅读到更多的优质文章。

最后,感谢你的阅读。

责任编辑:华轩 来源: web前端开发
相关推荐

2018-10-08 08:00:00

前端ReactJavaScript

2021-03-17 11:21:06

React数据存储

2023-10-04 07:25:59

JavaScriptpromises

2023-12-05 15:58:06

React开发

2020-10-31 21:59:37

Python列表开发

2022-05-24 14:37:49

React条件渲染

2020-10-23 09:57:23

TypeScriptany代码

2023-10-28 16:22:21

Go接口

2021-11-29 22:59:34

Go Dockertest集成

2024-02-07 11:44:20

NestJSRxJS异步编程

2011-12-08 10:24:53

JavaNIO

2020-08-02 22:42:25

JavaScript开发

2020-05-26 11:39:05

WebReact组件

2022-11-30 15:01:11

React技巧代码

2022-06-10 08:01:17

ReduxReact

2019-12-12 13:50:27

strace追踪系统调用Linux

2024-01-30 08:30:41

TypeScript编译器类型

2020-09-14 14:18:05

Vue和React

2021-01-05 08:39:51

容器前端流水线

2017-05-10 14:47:37

Headless Ch页面 Docker
点赞
收藏

51CTO技术栈公众号