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

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

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

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

Q&A

解決済

1回答

3382閲覧

Reactでのコンポーネント間でのデータの受け渡しについて

yoppy0066

総合スコア293

React.js

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

0グッド

0クリップ

投稿2018/02/14 17:49

Reactの練習で、リストの表示とリストへの追加のみのUIの画面を作っています。
入力フォームとリスト部分でコンポーネントを分けたため、その2つを内包する親コンポーネントにてstateの管理を行なっています。ソースコードに疑問の箇所を書かせていただいたのですがどなたかご教授いただけないでしょうか?そもそも実装としておかしいとい前提があればご指摘お願いできないでしょうか。」

App.js

class App extends React.Component { constructor(props) { super(props) this.state = [ { id:1, "user1" }, { id:2, "user2" } ] // ★疑問2 これを毎回書くもの? this.addItem = this.addItem.bind(this) } render() { return ( <div> <Form addItem={this.addItem} /> <Items items={this.state.items} /> </div> ) } addItem(text) { this.setState({ items: this.state.push({ id: 3, name: text }) }) } } export default App

Form.js

class Form extends React.Component { construct(props) { super(props) this.state = { text: '' } } render() { return ( <div> <input value={this.state.text} onChange={e => this.changeText(e)} /> <button onClick={e => this.addItem(e)}>Add</button> </div> ) } changeText(e) { this.setState({ text: e.target.value }) } addItem(e) { e.preventDefault() this.props.addItem(this.state.text); } }

Items.js

class Items extends React.Component { render() { console.log(this.props.items) // ★疑問1 Addクリック後に配列でなく数値が入ってきてしまう理由が不明 // 初期表示時 : => { id:1, "user1" }, { id:2, "user2" } // Addクリック後 : => 3 } }

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

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

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

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

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

guest

回答1

0

ベストアンサー

よっ

ちょっと試してみましたが、一先ず、上記のコードはそのままを使ったら、エラーが出ます。

エラー

#1 this.state

this.state = [ { id:1, "user1" }, { id:2, "user2" } ]

ではなくて、

this.state = { items: [ { id:1, name: "user1" }, { id:2, name: "user2" } ] }

を書いてください。

#1 constructor

書き間違いかもしれないですが、
construct(props)ではなくて、constructor(props)を書いてください。

#1 addItemのpush

そのままyoppy0066さんのコードを使うと、「Uncaught TypeError: this.state.push is not a function」が出てきます。
pushのメソードを使わずに、下記の方法ご覧ください。

addItem(text) { this.setState({ items: [ ...this.state.items, { id: 3, name: text }] }) }

疑問

★疑問1 疑問1 Addクリック後に配列でなく数値が入ってきてしまう理由が不明

初期表示時のthis.stateの書き方が間違えていると思いますので、数値が入ってきてしまう。

★疑問2 これを毎回書くもの?

this.addItem = this.addItem.bind(this)

そうですね! bind(this)を書かなかったら、あのメソードのComponentはFormになってしまう。 (もちろん、この状態でエラーが出ます。)
bind(this)をちゃんと使ったら、App Componentのstateが修正される。

:)

(日本語が間違えて、分かりずらかったら、ソーリー!)

投稿2018/02/15 04:54

jerome.dupuis

総合スコア172

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

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

yoppy0066

2018/02/15 14:30

ありがとうございます。記述ミスがいくつかあったのですが、pushメソッドを使うのをやめて教えていただいた書き方にしたら動きました。こちらは何がおかしいのでしょうか。。
jerome.dupuis

2018/02/15 14:33

This.stateにはreadonlyみたいObjectですから、pushっていうメソードが使えないです。 使えないですから、stateにデータを追加したかったら、基本的に this.setStateを使います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問