オプショナルチェーンが必要な理由
オプショナルチェーンが必要な理由がわからない
複数の要素への参照を親コンポーネントに持たせるために以下のページを参考にさせて頂きました
https://qiita.com/mackie0122/items/4ad6ca24102139dfc56a
こんな感じで実装が出来ました。
import React, {useRef} from "react"
import Test from "./test";
const A = () => {
const testRefs = useRef([])
console.log(testRefs.current[0]?.current)
return(
<div>
{["test1","test2", "test3"].map((_, i) => {
testRefs.current[i] = React.createRef()
return(
<div>
<Test
ref={testRefs.current[i]}
/>
</div>
)
})}
</div>
)
}
export default A
import React, { useEffect, forwardRef, useState, useRef } from "react"
const Test = forwardRef((props, testRef) => {
return (
<>
<div>
<div ref={testRef}>test</div>
</div>
</>
)
})
export default Test
このコードはちゃんと動作して、以下のようにコンソール画面に表示されます。
しかし、納得できないところがあったので質問させてください。
親コンポーネントのconsole.log(testRefs.current[1]?.current)で?を外すと以下のエラーがコンソール画面にでます。
これはなぜでしょうか？
testRefs.current[0]がnullだからエラーになるという事ですよね。
しかし、実際はtestRefs.current[0]?.currentはちゃんと動作します。
これはどういう事でしょうか？
動作させたらちゃんとtestRefs.current[0]?.currentで参照できる
だから?を外してもちゃんと動作するだろうと思ったらtestRefs.current[0].currentはnullだからcurrentはreadできないというエラーが発生する。
わけが分かりません。
ここからは私の勝手な推測ですが
私が気づかないだけでReactは2回動作をしているのでしょうか？
?をなくしてエラーになるのは
最初の1回目の動作でエラーとなっている。
?を付けてちゃんと動作するのは
最初の1回目の動作ではエラーを回避しており、
2回目の動作の時にtestRefs.current[0]に値が入って、testRefs.current[0]?.currentで正しくreadできる。
すみませんが、教えて頂けますと幸いです。
以上、よろしくお願い致します。
