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;

結尾

以上這就是這篇文章的全部內容！如果你覺得有用的話，請點贊我，關注我，你將會閱讀到更多的優質文章。

最后，感謝你的閱讀。