【React】1738- 请停止在 React 中使用“&&”进行条件渲染
【React】1738- 请停止在 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;结尾
以上这就是这篇文章的全部内容！如果你觉得有用的话，请点赞我，关注我，你将会阅读到更多的优质文章。
最后，感谢你的阅读。
往期回顾
#如何使用 TypeScript 开发 React 函数式组件？#11 个需要避免的 React 错误用法#6 个 Vue3 开发必备的 VSCode 插件#3 款非常实用的 Node.js 版本管理工具#6 个你必须明白 Vue3 的 ref 和 reactive 问题#6 个意想不到的 JavaScript 问题#试着换个角度理解低代码平台设计的本质回复“加群”，一起学习进步腾讯云开发者
