実現したいこと
Expoを使ってAndroidアプリを作成しており
ユーザーの操作によって値を更新したいと考えています。
また、値が画面遷移を行っても保持しておきたいため
Contextを用いて管理しようと考えています。
発生している問題・分からないこと
ContextファイルのProviderで定義した値を各ページで使用しています。
その更新をProvider内で定義した関数を用いて行いたいのですが
更新がされません。
Provider内の関数にログを設置し確認したのですが
関数の中に入って行っていないようです。
エラーメッセージ
error
1エラーメッセージなどは出ておらず値が更新されません。
該当のソースコード
TypeScript
1Providerの内容 2export const DataProvider = ({ children }: DataProviderProps): JSX.Element => { 3 const [values, setValues] = useState<CheckSheetValues>(defaultValues) 4 5 const updateValues = (group: string, index: number, newValue: string): void => { 6 console.log('updateValuesが呼び出されました。', group, index, newValue) 7 setValues((prevValues) => { 8 console.log('setValuesが呼び出されました。', prevValues) 9 // ここで prevValues を使用して状態を更新する 10 const updatedValues: CheckSheetValues = { ...prevValues } 11 // groupに対応する配列を深いコピー 12 updatedValues[group] = [...prevValues[group]] 13 updatedValues[group][index] = newValue 14 console.log('newValue:', newValue) 15 console.log(updatedValues[group][index]) 16 return updatedValues 17 }) 18 } 19 console.log('DataProvider内: データが提供されました。', values) 20 return ( 21 <DataContext.Provider value={{ values, updateValues }}> 22 {children} 23 </DataContext.Provider> 24 ) 25} 26
TypeScript
1実際に値を更新するupdateValues を使用している箇所 2const handleEnterPress = useCallback((displayText: string) => { 3 if (selectedIndex !== null && selectedIndex >= 0 && selectedIndex <= 19) { 4 console.log('変更前の値:', values[sheetKey][0]) 5 console.log('displayText:', displayText) 6 console.log('selectedIndex:', selectedIndex) 7 console.log('sheetKey:', sheetKey) 8 updateValues(sheetKey, selectedIndex, displayText) 9 console.log('変更後の値:', values[sheetKey][0]) 10 } 11 }, [selectedIndex])
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
handleEnterPress 内には到達している
valuesの値を変更すると表示される値が変わるため
Contextの値自体は使えている様子
補足
特になし
あなたの回答
tips
プレビュー