請停止在 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;結尾
以上這就是這篇文章的全部內容！如果你覺得有用的話，請點贊我，關注我，你將會閱讀到更多的優質文章。
最后，感謝你的閱讀。
