JavaScriptのmapメソッドの前で使われている配列の値を確認する方法を教えてください。

Question

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

---

【質問の主旨】

下記のコードの中で使われている配列productsの中身を確認したいと考えています。

const productTableDisplayData = useMemo(() => products.map((product) => [
    product.id, 
    product.title, 
    `${product.title}${appendToTitle}`,
    product.descriptionHtml,
    `${product.descriptionHtml}${appendToDescription}`,  
  ]), [products, appendToTitle, appendToDescription]);

どこでconsole.log(products)を実行すれば良いでしょうか？

【質問の補足】

1.

productsの中身を確認するために変数productTableDisplayDataを定義している箇所の前と後の行でconsole.log(products)を記述してみました。
ですがいずれも空の配列が返ってきます。

2.

上記の画像はShopifyのアプリです。そのアプリを構成するファイル群はGitHub上で公開しています。

---

以上、ご確認よろしくお願いします。

Answer 1

これはReactのuseMemo()かと思いますが、
依存する変数に変化があると呼び出されると思うので、引数の関数内で内容を確認すれば良さそうな気がします。

const productTableDisplayData = useMemo(() => {
    console.log(product);

    return products.map((products) => [
      product.id, 
      product.title, 
      `${product.title}${appendToTitle}`,
      product.descriptionHtml,
      `${product.descriptionHtml}${appendToDescription}`,  
    ])
  }, [products, appendToTitle, appendToDescription]
);

とはいえブラウザでブレークポイント張れれば一時停止して見た方が手っ取り早いとは思いますが。

Comments

[echizeyayota]

surface_0 さん。コメントありがとうございます。

> あまり深く見てはいませんが、productTableDisplayDataはおそらく関数を返す変数です。なので、これが定義される時点でproductsが存在するかはわかりませんが、

ご指摘の通りでした。
productTableDisplayDataが定義された時点では、変数productsは入りません。

index.jsの100行目に、ボタンを表すタグがあり、このボタンを押したときのみ変数productsに配列が入ります。
https://github.com/echizenyayota/sh_test_20211018/blob/master/pages/index.js#L100

よってproductsの内容を調べたい場合は、useCallbackフックの動作を定義し、かつ別のファイル(ProductUpdate.js)で定義している、runMutatation関数の動作が終わった後に
console.log(products)をすると、配列の中身が確認できることが分かりました。

https://github.com/echizenyayota/sh_test_20211018/blob/master/pages/index.js#L30-L54
https://github.com/echizenyayota/sh_test_20211018/blob/master/graphql/ProductUpdate.js

今後ともどうぞよろしくお願いします。

Answer 2

const productTableDisplayData = useMemo(() => (console.log(products), products.map((product) => [
    product.id, 
    product.title, 
    `${product.title}${appendToTitle}`,
    product.descriptionHtml,
    `${product.descriptionHtml}${appendToDescription}`,  
  ])), [products, appendToTitle, appendToDescription]);

Comments

[maisumakun]

> ですがいずれも空の配列が返ってきます。

本当に空だっただけ、ということはありませんか？

[echizeyayota]

maisumakun さん。コメントありがとうございます。

> 本当に空だっただけ、ということはありませんか？

ご指摘の通りでした。console.log(products)を記述するべき場所を間違えていました。

productTableDisplayDataが定義された時点では、変数productsは入りません。

index.jsの100行目に、ボタンを表すタグがあり、このボタンを押したときのみ変数productsに配列が入ります。
https://github.com/echizenyayota/sh_test_20211018/blob/master/pages/index.js#L100

よってproductsの内容を調べたい場合は、useCallbackフックの動作を定義し、かつ別のファイル(ProductUpdate.js)で定義している、runMutatation関数の動作が終わった後に
console.log(products)をすると、配列の中身が確認できることが分かりました。

https://github.com/echizenyayota/sh_test_20211018/blob/master/pages/index.js#L30-L54
https://github.com/echizenyayota/sh_test_20211018/blob/master/graphql/ProductUpdate.js

今後ともどうぞよろしくお願いします。

---