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

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

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

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

Q&A

解決済

1回答

938閲覧

ReactとRailsを使用しています。SuperAgentでapiから情報を取り、this.stateに格納したいのですができません。

shiki03

総合スコア17

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

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

0グッド

0クリップ

投稿2019/02/10 08:41

前提・実現したいこと

ReactとRailsを使用しています。SuperAgentでapiから情報を取り、componentDidMountでthis.stateに情報を格納したいのですができません。

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

this.stateに格納されない。

該当のソースコード

class MessagesBox extends React.Component {
constructor(props) {
super(props)
this.state = {
messages: [],
}
}

getMessages() {
request
.get(APIEndpoints.MESSAGES) // getリクエスト'/api/messages'
.end((error, res) => {
if (!error && res.status === 200) {
const json = JSON.parse(res.text)
this.setState({
messages: json.messages,
})
} else {
console.log(error)
}
})
}

componentDidMount() {
this.getMessages()
}

render() {
const messagesLength = this.state.messages.length
}

試したこと

render {
request
.get('/api/messages')
.end((error, res) => {
if (!error && res.status === 200) {
console.log(JSON.parse(res.text))
} else {
console.log(error)
}
})
}
上記のコードを記載してconsoleをみるとデータは格納されています。
しかし、this.stateには格納されません。

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

"react": "^0.14.5",

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

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

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

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

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

maisumakun

2019/02/10 13:37

RailsでTurbolinksは使っていますか、それとも使っていませんか?
shiki03

2019/02/10 23:48

application.html.erbに'data-turbolinks-track' => trueが記載されているので、使用していることになっていると思います。
maisumakun

2019/02/11 00:12

Reactのマウントはどのように行っていますか?
shiki03

2019/02/11 01:00

render以降の記載ということでしょうか? デベロッパーツール で確認するとrenderのthis.state.messageが空になってしまいます。
maisumakun

2019/02/11 02:05

いえ、ReactDOM.renderをどこでどのような形で行っているかです。
shiki03

2019/02/11 05:00 編集

すみません。勘違いしていました。 export default class MessageRouter extends BaseRouter { register() { this.route('/', this.decorateApp) } これでapplication.html.erbにrenderしてます DidMountでapiを取得するときにはnull回避は必ず必要ですか?
guest

回答1

0

自己解決

自己解決しましたので解決方法を記載します。

compornentDidMountでは1度目のrenderが終わった時の処理を記載する場所なので、apiの情報が間に合わないためthis.stateがunderfinedになってたみたいです。

それを回避するために
render{
return(
if (!this.state.message){

<div></div> } ) } を記載するとthis.stateに値が入っていない場合はreturnの空タグで処理が止まり、非同期通信が終わってthis.stateに値が入るとそれ以降の処理が行われるみたいです。

投稿2019/02/13 01:43

shiki03

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問