Reactで一番番号が早いもののうち、カウントされている子要素を使いたい

Question

カートに1つ以上のバッチがついているアイテムのうち、番号が早いものを優先に1つだけイメージを表示する仕組みを、Reactで実装したいと考えているのですがTypeErrorが出てしまい困っています。

エラー内容

おそらく、levelの取り方が間違っているのかもしれません。
あるいは、この時点では取得ができないのかもしれません。

TypeError: Cannot read property 'batch' of undefined

ソースコード

// items, cartItemsを定義する
const items = response.item_list.map((item, index) => ({
  batch: 0,
・・・・
});
const cartItems = [];

// 表示部分
render() {
  // cartItemsを取ってくる
  const cartItems = this.state.cartItems;
  return (
    // cartItemsの番号が早いもの順で1以上バッチがついているものを探す
    {cartItems === [] ? (
        <div />
    ) :  cartItems[0].batch > 0 ? (
        <div>
        <img src={items[0].image} alt="" />
        </div>
    ) :  cartItems[1].batch > 0 ? (
        <div>
        <img src={items[1].image} alt="" />
        </div>
    ) :  cartItems[2].batch > 0 ? (
        <div>
        <img src={items[2].image} alt="" />
        </div>
    ) : (
        <div />
    )}
  )
}

cartItemsが無理そうであれば、itemsのインデックスを使って処理するのも可能なのですが、同様のエラーが発生しています。

また、console.logをやってみると、items、cartItemsともに、batchは子要素として表示されています。

Answer 1

こんにちは。
render() の中で、 cartItems が空配列であるかどうかの判定を、以下のように修正してみるといかがでしょうか？

修正前：

{cartItems === [] ? (

　　

修正後：

{(!cartItems || cartItems.length === 0) ? (

または、cartItemsは undefined や null にならないことが分かっているならば、

{cartItems.length === 0 ? (

　　
確認したほうがよい基礎知識としては、

• cartItems が空の配列であっても cartItems === []は true にはならない

ことです。以下は node のREPLからこれを確認したところです。

以上参考になれば幸いです。

Comments

[k10a]

jun68yktさま、ご丁寧なご回答をいただきまして誠にありがとうございます。
無事解決いたしました。

[jun68ykt]

解決されたとのことで、よかったです ????