ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

React

DatePickerのformに空文字をSetValueすると 「Invalid time value」 になる

react-hook-formを使ってました。 nullはおkらしい setValue('date-input-form', null) // ok // setValue('date-input-form', '') // invalid time value

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

useEffectを削除したら消えた。なるほど。 const { setValue } = useForm() // 省略 useEffect(() => { // 省略 setValue('variable.hoge', hoge) }, [storeVariable]) こんな感じの処理を書いてた。 次に、useEffectを消さずに、setValueだけ消したらエラー…

【わからない】react-hook-formとYupで複数フィールドの重複をチェックするバリデーションとエラーを表示するフォーム

ほぼ1日かけて探したけどわからないので供養 const uniqueId = (value, context) => { const [_, parent] = context.from const filedNames = ['hogehoge1', 'hogehoge2', 'hogehoge3'] const list = [ parent.value.hogehoge1.id, parent.value.hogehoge2.i…

React + GraphQLで通信エラーを確認する

ベストプラクティスはどうやってデバッグするのかはわからないですが、下記メモ。 query, mutationからerror変数を取得する // errorを確認してみる const { data: getSomething, loading, error } = useGetSomethingQuery({ variables: { id, }, fetchPolic…

Vite + TypeScript + Reactの環境にJestをインストールする(途中)

zenn.dev ↑みたらもう解決です。 github.com このcommitからスタートしました。 $ yarn add --dev jest typescript @types/jest ts-jest どうやらtypescriptが入ってなかったらしいです(あれ????) あとは参考URLの通り、 jest.config.json と package.…

react-webcamでstreamに値が入るまで待つ

github.com const webcamRef = useRef(null) return ( // 省略 <Webcam audio={false} className="z-0" id="img" ref={webcamRef} /> ) こんな感じで起動していましたが、別処理でカメラで取得したデータを別途保存したいため、 webcamRef を使おうとしたら、streamにまだ値がないですよエラー。 どうやって待てばいいのかと色</webcam>…

MediaRecorderのdataavailable eventが発火されるタイミングについて

stopが呼ばれるときってマジ????? developer.mozilla.org 記録を停止します。 この時点で、保存したデータの最後の Blob を含む dataavailable イベントが発生します。 これ以上記録は行われません。 アッはい 動作してみないと信じられない!!!(な…

useEffectで初回実行しないようにする

qiita.com qiita.com koke-tech-blog.vercel.app zenn.dev 第二引数に指定してたらそいつが変更されるまで動かないと思ってたんですが、そうじゃないらしい。なので↑みたいなことを試したんですが、 useRef ってそういう使い方あり???ってなってもう何も…

ReactでMUIコンポーネントにstyleを渡す

なんてよぶかわからんが、とりあえずメモ mui.com こいつにstyleを渡すには sx propsにわたす必要がある. const a = { sx: { backgroundColor: '#eee', } } return ( <TextField id="ほげほげ" label="ほげほげ" defaultValue={hogehoge} ...a /> ) このとき、backgroundColor を background-color って指定したら怒られる。 react_devt</textfield>…