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

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

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

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

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

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

Q&A

解決済

1回答

3410閲覧

React Redux mapStateToProps 値の受け取り方について

ruby_0ct

総合スコア57

React Native

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

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

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

0グッド

0クリップ

投稿2018/12/01 11:58

編集2018/12/02 09:17

子コンポーネントにあるボタンを押すと、あらかじめ用意したテキストをStateに保存し、子コンポーネントの<Text>内に表示される処理を行いたいです。

dispatchからStore生成、mapStateToPropsでの受け取りまでは正常に処理されているのですが、受け取った値の表示で以下のエラーになります。

Invariant Violation: Objects are not valid as a React child (found: object with keys {textStore}). If you meant to render a collection of children, use an array instead.

どのように修正すれば良いかがわかりません。
解決策を教えていただけると幸いです。

ソースコード

子コンポーネント
プロジェクト名/com.js

jsp

1import React, {Component} from 'react'; 2import {Text, View, Button, TextInput} from 'react-native'; 3import {connect, Provider} from "react-redux"; 4import App, {getData} from "../App" 5 6class Com extends Component { 7 constructor(props) { 8 super(props) 9 } 10 11 render(){ 12 return( 13 <View> 14 <Button 15 title="テキストを更新" 16 onPress={() => {this.props.updateText()}} 17 /> 18 <Text>{this.props.store.textStore}</Text> 19 </View> 20 ) 21 } 22} 23 24const mapStateToProps = (store, ownProps) => { 25 return { 26 store 27 } 28} 29 30const mapDispatchProps = (dispatch) => { 31 return { 32 updateText: () => { 33 dispatch({type: 'UPDATE_DATA', textStore: '更新されたテキスト'}) 34 } 35 } 36} 37 38export default connect(mapStateToProps, mapDispatchProps)(Com)

mapStateToPropsでは、{textStore: "更新されたテキスト"}でreturnしています。

親コンポーネント
プロジェクト名/App.js

jsp

1import React, {Component} from 'react'; 2import {Platform, StyleSheet, Text, View, Button, FlatList, TextInput} from 'react-native'; 3import { connect, Provider } from 'react-redux' 4import { createStore } from 'redux' 5 6import Com from './components/com' 7import reducer from './reducer/index' 8 9const store = createStore(reducer) 10 11type Props = {}; 12export default class App extends Component<Props> { 13 render() { 14 return ( 15 <View> 16 <Com store={store} /> 17 </View> 18 ); 19 } 20}

Reducer
/reducer/index.js

jsp

1export default reducer = (state = initialStore, action) => { 2 switch (action.type) { 3 case 'UPDATE_DATA': 4 return { textStore: action.textStore } 5 6 default: 7 return state.textStore 8 } 9}

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

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

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

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

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

jun68ykt

2018/12/02 08:10

ご質問に「受け取った値の表示で以下のエラーになります。」とありますが、具体的に、受け取った値を表示している部分のコードはどこになりますでしょうか?それともう一点、気になったのは、Reducer の方では return { textStore: action.textStore } となっていますが、アクションをdispatch している com.js の方では、dispatch({type: 'UPDATE_DATA', storeText: '更新されたテキスト'}) となっており、アクションのプロパティがtextStoreだったりstoreTextだったりしている点です。ここは問題なしでしょうか?
ruby_0ct

2018/12/02 09:17

ご指摘いただいた部分がコピペミスでしたので、修正しました。 受け取った値を表示している部分は、子コンポーネントcom.jsのボタン直下の<Text>内で表示させています。
jun68ykt

2018/12/02 09:42

修正ありがとうございます。回答しました。
guest

回答1

0

ベストアンサー

こんにちは

ここが怪しいのでは?と思うところを回答します。以下のように修正するといかがでしょうか?

修正対象: /reducer/index.js

修正前:

javascript

1default: 2 return state.textStore 3

修正後:

javascript

1default: 2 return state 3

すなわち、 switch文の default: で return state.textStore としているところの、 .textStore が不要で、これを取れば、うまくいくか、少なくとも違うエラーになるのではと思います。

それと一点気になったのは、

javascript

1export default reducer = (state = initialStore, action) => {

と、引数 state の初期値の変数名が、 initialStore となっていることです。initialStateと書くコードはよく見かけます。

参考になれば幸いです。

投稿2018/12/02 09:41

編集2018/12/02 09:48
jun68ykt

総合スコア9058

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

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

ruby_0ct

2018/12/02 17:02

うまくいきました。ありがとうございます。 オブジェクトではなく、文字列で返すという形ですね。 initialStateについて参考になります。 あと、defaultではなく、UPDATE_DATAの方です...!
jun68ykt

2018/12/02 21:33

うまくいったとのことで、よかったです ????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問