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

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

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

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

Q&A

1回答

1995閲覧

render()メソッド以外で親コンポーネントからパラメータを受け取りたい

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

0クリップ

投稿2018/05/23 02:58

reactで動的にファイルをfetchする方法について困っています。
stateとpropsを同時に子コンポーネントに渡したいので下記のように記述しました。

jsx

1<Route exact path='/document/:id' 2 render={props => <Contents file={this.state}{...props} />}/>

が、Contentsコンポーネントではrender()メソッド内でしか
propsを受け取れない状態です。
受け取ったパラメータを元にfetchしたいのですが、
fetchした時に、レスポンスデータを取り出すのにsetState()が必要で、
render内で使えない認識です(無限ループ)。

この書き方でrender()メソッド以外で親コンポーネントの
パラメータを受け取る方法はありませんでしょうか。
他にアプローチ方法があれば参考リンクなどいただけますでしょうか。
stackoverflowは読めます。

環境:
react 16.3
react-router:4.2.2

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

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

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

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

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

HayatoKamono

2018/05/23 04:40 編集

ちょっと状況や何を解決したいのが十分に伝わってこないです。こちらの質問のヒントを参考にして、第三者にも伝わるように全体的に補足をして下さい。https://teratail.com/help/question-tips もしくは、(好ましくはそれに加えて)、現象を再現するために必要な最小限のコード一式を漏れなく掲載して下さい。
guest

回答1

0

Route の render属性の props 引数って何が入ってくるんでしょう。
失礼しました。withRouter でコンポーネントをラップした時と同様の props が追加されます。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

イマイチ意図を汲み取れなかったので誤解してるかもしれませんが、とりあえず react-router-dom@4 の Basic Example を元に書いて見ましたが動作してると思います。
https://reacttraining.com/react-router/web/example/basic

js

1import React from 'react'; 2import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 3 4const Home = () => ( 5 <div> 6 <h2>Home</h2> 7 </div> 8); 9 10class Ip extends React.Component { 11 state = { 12 ip: 'Not responded yet.', 13 }; 14 async componentDidMount() { 15 const response = await fetch(this.props.url); 16 const { ip } = await response.json(); 17 this.setState({ ip }); 18 } 19 render() { 20 return ( 21 <div> 22 <p>{this.state.ip}</p> 23 </div> 24 ); 25 } 26} 27 28const BasicExample = (props) => ( 29 <Router> 30 <div> 31 <ul> 32 <li> 33 <Link to="/">Home</Link> 34 </li> 35 <li> 36 <Link to="/ip">Ip</Link> 37 </li> 38 </ul> 39 40 <hr /> 41 42 <Route exact path="/" component={Home} /> 43 <Route path="/ip" render={() => <Ip {...props}/>} /> 44 </div> 45 </Router> 46); 47 48export default () => <BasicExample url="http://ip.jsontest.com"/>;

追記

どちらにせよ Route に与えられたコンポーネントの render メソッド以外で、どの props も問題なく見れました。
やはり、どういう問題が起きているかよくわからないので、HayatoKamono さんがおっしゃっているように、質問内容の加筆を希望します。

投稿2018/05/23 05:07

編集2018/05/23 05:52
og24715

総合スコア832

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問