質問編集履歴
2
解決！
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -99,4 +99,7 @@
|
|
|
99
99
|
なので、上記のコードでリンクを押すとコンポーネントを初期化し読み込んでくれる方法を教えてください！今のままでは入れ替えているはずが、同じCardコンポーネントとして処理され、URL遷移しか行われていない気がします。
|
|
100
100
|
|
|
101
101
|
## 追記
|
|
102
|
-
URL直叩きでも表示できるようにするため、遷移前のページからデータを渡すことは考えていません。
|
|
102
|
+
URL直叩きでも表示できるようにするため、遷移前のページからデータを渡すことは考えていません。
|
|
103
|
+
|
|
104
|
+
## 解決
|
|
105
|
+
ベストアンサーのように`Route`の使い方を正しくし、`componentDidUpdate`を併用したら解決しました。
|
1
分かりやすくした
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
[React]
|
|
1
|
+
[React]リンクをクリックしてもコンポーネントが入れ替わらない
|
body
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
＊ 分かりにくかったので大幅に編集しています。患っている問題は変わっておりません。
|
|
2
|
-
リンク先のページに行くとそのページのURLのパスを取得し、画面上に表示させることはできます。しかし、そのパスを`render()`内にかくと、stateに入れられず、それを使ったAPIの取得などができません。
|
|
3
2
|
|
|
3
|
+
#リンクをクリックしてもコンポーネントが入れ替わらない
|
|
4
|
+
リンクを押すと`localhost:3000/python`のように押した言語のページに行き、URLパスを取得し、`python完全に理解した`と表示されるようになっています。しかし、そのページから他の言語のリンクを押しても、下の画像のようにコンポーネントは入れ替わらないままです。（ページをリロードするとようやく入れ替わります。）
|
|
5
|
+
|
|
6
|
+
pythonと押した時
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
JavaScriptと押した時
|
|
10
|
+
|
|
11
|
+
|
|
4
|
-
##該当のコード
|
|
12
|
+
## 該当のコード
|
|
5
13
|
App.js
|
|
6
14
|
```javascript
|
|
7
15
|
import React, { Component } from 'react';
|
|
@@ -51,67 +59,44 @@
|
|
|
51
59
|
import React, {Component} from 'react';
|
|
52
60
|
|
|
53
61
|
class Card extends Component {
|
|
62
|
+
constructor(props) {
|
|
63
|
+
super(props);
|
|
64
|
+
var urlPass = window.location.pathname
|
|
65
|
+
var uP = urlPass.slice(1)
|
|
66
|
+
console.log(uP)
|
|
54
|
-
|
|
67
|
+
this.state = {lang: uP}
|
|
55
|
-
lang
|
|
68
|
+
console.log(this.state.lang)
|
|
56
69
|
}
|
|
57
70
|
|
|
58
71
|
componentDidMount() {
|
|
59
|
-
this.setState({lang: this.uP})
|
|
60
|
-
console.log(this.state.lang
|
|
72
|
+
console.log(this.state.lang)
|
|
61
73
|
}
|
|
62
74
|
|
|
63
75
|
render() {
|
|
64
|
-
var urlPass = window.location.pathname
|
|
76
|
+
/*var urlPass = window.location.pathname
|
|
65
77
|
var uP = urlPass.slice(1)
|
|
66
|
-
console.log(uP)
|
|
78
|
+
console.log(uP)*/
|
|
67
79
|
|
|
68
80
|
return(
|
|
69
|
-
<div>{
|
|
81
|
+
<div>{this.state.lang}完全に理解した</div>
|
|
70
82
|
);
|
|
71
83
|
}
|
|
72
84
|
}
|
|
85
|
+
|
|
86
|
+
export default Card;
|
|
73
87
|
```
|
|
74
88
|
|
|
75
|
-
|
|
89
|
+
`constructor()`を使っているので再びマウントされたら入れ替わるはずです。しかし、実際には起こっていません。`App.js`の`Route`の問題なのか分かりません。
|
|
76
90
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
`componentDidMount()`上でも使えるようにしたい。
|
|
81
|
-
|
|
82
91
|
## 試したこと
|
|
92
|
+
### render()内に書く
|
|
83
|
-
|
|
93
|
+
しかしこれは将来的に`componentDidMount()`内でURLパスを使い、APIの取得を考えているのでデータを`componentDidMount()`に渡せないのでやめました。
|
|
84
94
|
|
|
85
|
-
```javascript
|
|
86
|
-
|
|
95
|
+
### componentDidMount()内に書く
|
|
96
|
+
stateのセットがうまくできず空になり、またライフサイクルの都合上、DOMにも言語名が表示されませんでした。
|
|
87
97
|
|
|
88
|
-
class Card extends Component {
|
|
89
|
-
state = {
|
|
90
|
-
lang: ''
|
|
91
|
-
}
|
|
92
98
|
|
|
93
|
-
componentDidMount() {
|
|
94
|
-
var urlPass = window.location.pathname
|
|
95
|
-
var uP = urlPass.slice(1)
|
|
96
|
-
console.log(uP)
|
|
97
|
-
this.setState({lang: uP})
|
|
98
|
-
|
|
99
|
+
なので、上記のコードでリンクを押すとコンポーネントを初期化し読み込んでくれる方法を教えてください！今のままでは入れ替えているはずが、同じCardコンポーネントとして処理され、URL遷移しか行われていない気がします。
|
|
99
|
-
}
|
|
100
100
|
|
|
101
|
-
render() {
|
|
102
|
-
return(
|
|
103
|
-
<div>{this.state.lang}完全に理解した</div>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export default Card;
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
しかし、今度は一つ目のログは表示されるのですが、二つ目のログはやはり`さん`のみしか表示されず、DOMにも値が表示されなくなっています。おそらくライフサイクルが原因だと思うのですが、二つ目のログまでうまく出力されないのかは疑問です。
|
|
112
|
-
|
|
113
|
-
取得したURLパスを`componentDidMount()`内で用い、DOMに描画する解決策はありませんか？
|
|
114
|
-
|
|
115
101
|
## 追記
|
|
116
|
-
###将来的に考えていること
|
|
117
|
-
URL
|
|
102
|
+
URL直叩きでも表示できるようにするため、遷移前のページからデータを渡すことは考えていません。
|