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

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

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

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

336閲覧

React Hooks にて setStateが反映されない。

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/12/11 04:27

React Hooksを用いて、チャットアプリを作成しようとしています。
まずはuseStateだけでApp.jsに最低限のことを書いて、後から分割していこうと思ったのですが
setState(下記で言うところのsetMessage)が反映されません。

テキストエリアに文字を書く。 => setContent発火        ↓ 送信ボタンを押す => handleMessageSubmitが発火し、setMessageで各情報を入れていく。

ですが、このsetMessageに情報を入れてconsole.logでmessageを確認しても空の状態でしか返されません。
状態管理がそもそも理解できていない部分もあると思います。

以下コードです。

import React, { useState } from 'react'; import { Button, TextField, Box, Container } from '@material-ui/core'; import SendIcon from '@material-ui/icons/Send'; import "bootstrap/dist/css/bootstrap.min.css"; import './common.scss'; function App() { const [messages, setMessages] = useState([]); const [message, setMessage] = useState({}) const [content, setContent] = useState(''); const handleMessageSubmit = e => { e.preventDefault(); setMessage({ id: 1, user_id: 1, // 仮 content: content, read: false, //仮 current_user: true //仮 }); console.log(message); setContent(''); } return ( <Container> <div className='current-message-wrap'> <div className='message current-message'> <p>メッセージ</p> </div> </div> <div className='message other-message'> <p>メッセージ</p> </div> <Box display='flex' className='fixed-bottom'> <TextField label='コメント' variant='outlined' fullWidth style={{ marginRight: 1 }} value={ content } onChange={ e => setContent(e.target.value) } /> <Button variant="contained" color="primary" onClick={ e => handleMessageSubmit(e) } > <SendIcon /> </Button> </Box> </Container> ); } export default App;

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

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

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

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

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

guest

回答1

0

ベストアンサー

ですが、このsetMessageに情報を入れてconsole.logでmessageを確認しても空の状態でしか返されません。

はい、次にレンダリングするタイミングになって初めて値が反映されます。setStateしたのと同期的なタイミングでは値は取れません。

投稿2019/12/11 04:30

maisumakun

総合スコア145123

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

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

退会済みユーザー

退会済みユーザー

2019/12/11 04:35

useEffect等コールバックを用いて、setStateと同じタイミングではない方法を考慮するべき、ということですか?
maisumakun

2019/12/11 04:36

使い方によります。 (handleMessageSubmitの中で使うのであれば、setStateするオブジェクトを取っておいて、それをそのまま流用する、という形もありです)
退会済みユーザー

退会済みユーザー

2019/12/11 04:45

なるほど!ちょっとやってみます! ご回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問