React 是一個(gè)目前流行的前端框架之一，可以幫助我們高效地構(gòu)建用戶界面。

但是在使用React進(jìn)行開發(fā)時(shí)，我們卻不能正確使用&&，很容易導(dǎo)致UI錯(cuò)誤。

因此，我們需要知道，&&運(yùn)算符導(dǎo)致的React UI界面錯(cuò)誤。

如何工作？

我們應(yīng)該用什么代替&&？

1. &&運(yùn)算符導(dǎo)致的React UI界面錯(cuò)誤

我經(jīng)常需要編寫需要從服務(wù)器端獲取數(shù)據(jù)的頁面，這些數(shù)據(jù)用于呈現(xiàn)列表。如果數(shù)據(jù)的長度為0，則不應(yīng)顯示。

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

眼見為實(shí)，我的朋友們，所以請(qǐng)點(diǎn)擊此Codepen的鏈接進(jìn)行查看。

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

你會(huì)注意到，當(dāng) list 是一個(gè)空數(shù)組時(shí)，頁面將呈現(xiàn) 0 而不是什么都沒有。

我的天哪，這到底是怎么回事？

2.&& 是如何工作的？

這是一個(gè) React 錯(cuò)誤嗎？值得慶幸的是，這個(gè)問題的原因不是因?yàn)?React 犯了錯(cuò)誤，而是與 Javascript 本身的工作方式有關(guān)。

來自 MDN的解釋：當(dāng)且僅當(dāng)所有操作數(shù)都為真時(shí)，一組布爾操作數(shù)的邏輯與 (&&) 運(yùn)算符（邏輯合?。┎艦檎?。否則就是假的。

一般運(yùn)算符返回從左到右計(jì)算時(shí)遇到的第一個(gè)假操作數(shù)的值，或者如果它們都是真值，則返回最后一個(gè)操作數(shù)的值。

讓我們學(xué)習(xí)一個(gè)非常簡單的例子，我想你會(huì)很快理解的。

const a = 0
const b = "React"
const c = 1
const d = "Javascript"


console.log(a && b) // 0
console.log(c && d) // Javascript

當(dāng)你在代碼中使用a && b時(shí)，如果a為0，則直接返回，不再計(jì)算b的值。

你一定明白為什么上面的 React 例子顯示 0 了。

3.我們應(yīng)該用什么來代替&&？

&& 運(yùn)算符很容易出錯(cuò)，我們是否應(yīng)該放棄使用它呢？

不，我們不應(yīng)該那樣做。我們可以嘗試這3種方式來避免這個(gè)問題。

3.1 使用！!list.length

我們可以把數(shù)組的長度轉(zhuǎn)成布爾值，就不會(huì)再出現(xiàn)這個(gè)錯(cuò)誤了。

// 1. Convert list.length to boolean
!!list.length && <Component list={list} />

3.2 使用 list.length >= 1

和上面的原理一樣，我們用另一種方式將其轉(zhuǎn)為布爾值。

// 2. Controlled by specific logic
list.length >= 1 && <Component list={list} />;

3.3 使用三元表達(dá)式

如果您的應(yīng)用程序不是特別復(fù)雜并且僅使用 1 或 2 個(gè)三元表達(dá)式即可解決，我會(huì)推薦它。

// 3. Use ternary expressions and null
list.length ? <Component list={list} /> : null;

結(jié)尾

以上這就是這篇文章的全部內(nèi)容！如果你覺得有用的話，請(qǐng)點(diǎn)贊我，關(guān)注我，你將會(huì)閱讀到更多的優(yōu)質(zhì)文章。

最后，感謝你的閱讀。