React での条件付きレンダリングに「&&」を使用するのはやめてください

React は、ユーザーインターフェイスを効率的に構築するのに役立つ、人気のあるフロントエンドフレームワークの 1 つです。

しかし、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 からの説明: 一連のブールオペランドの論理 AND (&&) 演算子 (論理積) は、すべてのオペランドが true の場合にのみ true になります。それ以外の場合は false です。

一般演算子は、左から右への評価時に最初に検出された false オペランドの値を返し、すべて true の場合は最後のオペランドの値を返します。

非常に簡単な例を見てみましょう。すぐに理解できると思います。


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;

英文 | https://javascript.plainenglish.io/its-2023-please-stop-using-for-conditional-rendering-in-react-b588a09ebb17

React での条件付きレンダリングに「&&」を使用するのはやめてください

おすすめ