teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問axiosで取得してきたデータをsetStateできない

編集履歴

質問編集履歴

3

間違い修正

2017/11/25 04:52

投稿

dialbird
dialbird

スコア379

test CHANGED
File without changes
test CHANGED
@@ -76,7 +76,7 @@
76
76
 
77
77
  super();
78
78
 
79
- this.state = { dataSource: [] };
79
+ this.state = { datas: [] };
80
80
 
81
81
 
82
82
 
@@ -100,7 +100,7 @@
100
100
 
101
101
  // .then((res)=>{
102
102
 
103
- // this.setState({ dataSource: ds.cloneWithRows(res.data) });
103
+ // this.setState({ datas: ds.cloneWithRows(res.data) });
104
104
 
105
105
  // // 帰ってきたユーザーデータが表示される
106
106
 

2

更新

2017/11/25 04:52

投稿

dialbird
dialbird

スコア379

test CHANGED
File without changes
test CHANGED
@@ -2,10 +2,66 @@
2
2
 
3
3
 
4
4
 
5
+ 追記：ListViewのDataSourceを実行する位置が原因で、エラーが発生していたことはわかりました。
6
+
7
+ ですが今度は、肝心のListViewがなぜかレンダリングされないのです。
8
+
9
+
10
+
11
+ ListViewの要素である、ListItemには情報は渡ってきているのですが、どういうわけかまっさらなままレンダーされないのです
12
+
13
+
14
+
5
15
  ```js
6
16
 
17
+ // Screen.js
18
+
7
19
  import React from 'react';
8
20
 
21
+ import {
22
+
23
+ Text,
24
+
25
+ View
26
+
27
+ } from 'react-native';
28
+
29
+ import { List } from '../common';
30
+
31
+
32
+
33
+ class Screen extends React.Component {
34
+
35
+ render() {
36
+
37
+ return (
38
+
39
+ <View>
40
+
41
+ <List />
42
+
43
+ </View>
44
+
45
+ );
46
+
47
+ }
48
+
49
+ }
50
+
51
+
52
+
53
+ export default Screen;
54
+
55
+ ```
56
+
57
+
58
+
59
+ ```js
60
+
61
+ // List.js
62
+
63
+ import React from 'react';
64
+
9
65
  import { ListView } from 'react-native';
10
66
 
11
67
  import axios from 'axios';
@@ -22,29 +78,49 @@
22
78
 
23
79
  this.state = { dataSource: [] };
24
80
 
81
+
82
+
83
+ // こっちにdataSourceを置く
84
+
85
+ this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1!==r2});
86
+
25
87
  }
26
88
 
27
89
 
28
90
 
29
91
  componentWillMount() {
30
92
 
93
+ // 以前はstateに直接ds.cloneWithRowsしたデータを入れていたが、それでは失敗することがわかったので移動
94
+
95
+
96
+
31
- 　　const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
97
+ 　　// const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
32
-
98
+
33
- axios.get('http://path/to/api/v1/users')
99
+ //axios.get('http://path/to/api/v1/users')
34
-
100
+
35
- .then((res)=>{
101
+ // .then((res)=>{
36
-
102
+
37
- this.setState({ dataSource: ds.cloneWithRows(res.data) });
103
+ // this.setState({ dataSource: ds.cloneWithRows(res.data) });
38
-
104
+
39
- // 帰ってきたユーザーデータが表示される
105
+ // // 帰ってきたユーザーデータが表示される
40
-
106
+
41
- console.log(JSON.stringify(res.data));
107
+ // console.log(JSON.stringify(res.data));
42
-
108
+
43
- // stateが変わってない
109
+ // // stateが変わってない
44
-
110
+
45
- console.log(this.state);
111
+ // console.log(this.state);
46
-
112
+
47
- })
113
+ // })
114
+
115
+ // .catch((e)=>console.log(`axios get error: ${e.message}`));
116
+
117
+
118
+
119
+ 　　// 修正したコード
120
+
121
+ axios.get('http://lala.work/api/v1/users')
122
+
123
+ .then((res)=>this.setState({ datas: res.data }))
48
124
 
49
125
  .catch((e)=>console.log(`axios get error: ${e.message}`));
50
126
 
@@ -54,13 +130,11 @@
54
130
 
55
131
  renderRow(user) {
56
132
 
57
- return <ListItem user={user}/>;
133
+ 　　return <ListItem user={user}/>;
58
-
134
+
59
- }
135
+ }
60
-
61
-
62
-
63
- 　// setStateの情報が入ってくれないから、Cannot read property 'length' of undefinedが出てレンダーできない
136
+
137
+
64
138
 
65
139
  render() {
66
140
 
@@ -68,7 +142,9 @@
68
142
 
69
143
  <ListView
70
144
 
145
+ 　　　 enableEmptySections
146
+
71
- dataSource={this.state.dataSource}
147
+ dataSource={this.dataSource.cloneWithRows(this.state.datas)}
72
148
 
73
149
  renderRow={this.renderRow}
74
150
 
@@ -88,18 +164,52 @@
88
164
 
89
165
 
90
166
 
167
+ ```js
168
+
169
+ // ListItem.js
170
+
171
+
172
+
173
+ import React from 'react';
174
+
175
+ import {
176
+
177
+ Text
178
+
179
+ } from 'react-native';
180
+
181
+
182
+
183
+ class ListItem extends React.Component {
184
+
91
- 原因として考えられるのは
185
+ render() {
186
+
92
-
187
+ // データは入っている
188
+
93
- - axiosの仕様上、axiosのコールバックの中ではsetStateできない
189
+ console.log(this.props.user.name);
190
+
191
+
192
+
94
-
193
+ return (
194
+
95
- - axiosの通信を待つ前にレンダーしてしまうため、データがないと判断されてしまう
195
+ <Text>{this.props.user.name}</Text>
196
+
96
-
197
+ );
198
+
97
-
199
+ }
200
+
98
-
201
+ }
202
+
203
+
204
+
99
- などを考えたのですが、いずれも解決策がわからず........
205
+ export default ListItem;
206
+
100
-
207
+ ```
101
-
102
-
208
+
209
+
210
+
211
+
212
+
103
- どなたかご存知の方お願いできないでしょうか？
213
+ どなたかListViewが出ない理由をご存知の方お願いできないでしょうか？
104
214
 
105
215
  よろしくお願いいたします

1

urlの修正

2017/11/25 04:25

投稿

dialbird
dialbird

スコア379

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  　　const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
32
32
 
33
- axios.get('http://lala.work/api/v1/users')
33
+ axios.get('http://path/to/api/v1/users')
34
34
 
35
35
  .then((res)=>{
36
36