質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

2回答

327閲覧

React Native async awaitができない

yah

総合スコア30

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2023/05/04 05:22

編集2023/05/06 14:13

閲覧いただき、ありがとうございます!
React Native・JS・TSの初心者です。

実現したいこと

ボタン押下時に、useStateで保持している値をカウントアップしてから、カウントアップされた値を表示したいです。

発生している問題・エラーメッセージ

カウントアップされる前に値が表示されてしまいます。

該当のソースコード

JavaScript

1export function ExecuteButton(props) { 2 const [count, setCount] = useState(0); 3 4 const onPress = async () => { 5 console.log(count); // 最初の押下ではuseState(0)でセットされた0が表示される 6 setCount(await count + 1); // countが1になる 7 const str = await 'count: ' + count; 8 Alert.alert(str); // 「count: 1」と表示したいが、「count: 0」になる 9 } 10 11 return ( 12 <Button 13 onPress={onPress} 14 title='START!!!' /> 15 ); 16} 17

補足情報(FW/ツールのバージョンなど)

package.json(抜粋)

json

1 "dependencies": { 2 "react": "18.2.0", 3 "react-native": "0.71.7", 4 }, 5 "devDependencies": { 6 "@types/react": "~18.0.14", 7 "@types/react-native": "^0.71.6", 8 "typescript": "^4.9.4" 9 },

alertにはcount: 1を表示したいです。
解決方法をご教授いただけますと、幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

反映されない理由の理解は下記を参考にしました。
参考までに。
https://zenn.dev/syu/articles/3c4aa813b57b8c

投稿2023/05/06 05:13

yah

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

無理です。

countconstで宣言されていることからもわかるように、1度の実行で値は変わりません

変わったcountuseEffectで拾うなど、根本的に構造を変える必要があります。

投稿2023/05/04 22:24

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yah

2023/05/06 05:12

useEffectなどが必要なのですね、ありがとうございます! https://reffect.co.jp/react/react-useeffect-understanding を参考に、下記のようにしたら想定通り動きました! ```JavaScript export function ExecuteButton(props) { const [count, setCount] = useState(0); useEffect(() => { if (count !== 0) { // 起動時にAlertが出現してしまったので、ifを追加 const str = 'count: ' + count; Alert.alert(str); } }, [count]); const onPress = () => { console.log(count); // 最初の押下ではuseState(0)でセットされた0が表示される setCount(count + 1); // countが1になる } return ( <Button onPress={onPress} title='START!!!' /> ); } ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問