質問編集履歴

4

誤字

2021/07/24 13:00

投稿

ad_mania_g
ad_mania_g

スコア0

test CHANGED
File without changes
test CHANGED
@@ -222,7 +222,7 @@
222
222
 
223
223
  const Lists = await Api.initUserPost();
224
224
 
225
-
225
+        setLists(Lists);
226
226
 
227
227
  console.log(Lists);
228
228
 

3

useEffectを変更

2021/07/24 13:00

投稿

ad_mania_g
ad_mania_g

スコア0

test CHANGED
File without changes
test CHANGED
@@ -201,3 +201,33 @@
201
201
 
202
202
 
203
203
  よろしくお願いします。
204
+
205
+
206
+
207
+
208
+
209
+
210
+
211
+ **追加**
212
+
213
+ useEffect内でasync awaitを使うのが良くないと言うことを教えて頂いたので、
214
+
215
+ uesEffectを下記のコードに変更しましたが、同様のエラーが出ます。
216
+
217
+ ```ここに言語を入力
218
+
219
+ useEffect(()=>{
220
+
221
+ (async () => {
222
+
223
+ const Lists = await Api.initUserPost();
224
+
225
+
226
+
227
+ console.log(Lists);
228
+
229
+ }) ()
230
+
231
+ },[])
232
+
233
+ ```

2

修正しました。

2021/07/24 12:59

投稿

ad_mania_g
ad_mania_g

スコア0

test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  useEffect(async ()=>{
40
40
 
41
- const Lists =await Api.fetchposts();
41
+ const Lists =await Api.initUserPost();
42
42
 
43
43
  setLists(Lists);
44
44
 

1

一部だったMessageSender.jsを全文に変更しました。

2021/07/24 12:47

投稿

ad_mania_g
ad_mania_g

スコア0

test CHANGED
File without changes
test CHANGED
@@ -20,30 +20,130 @@
20
20
 
21
21
  import * as Api from "../service/api";
22
22
 
23
+ import {Link} from "react-router-dom";
24
+
25
+ import {Avatar} from "@material-ui/core";
26
+
23
27
 
24
28
 
25
29
  const MessageSender=()=>{
26
30
 
27
31
  const currentUser =useContext(AuthContext);
28
32
 
29
-
30
-
31
- const [inputComment, setInputComment] =useState("");
33
+ const [inputName, setInputName] =useState("");
32
-
34
+
33
- const [lists, setLists]=useState([]);
35
+ const [Lists, setLists]=useState([]);
34
36
 
35
37
 
36
38
 
37
39
  useEffect(async ()=>{
38
40
 
39
- const Lists =await Api.initUserPost();
41
+ const Lists =await Api.fetchposts();
40
42
 
41
43
  setLists(Lists);
42
44
 
43
- console.log(Lists);
44
-
45
45
  },[])
46
46
 
47
+
48
+
49
+ const todoList =Lists.map((post)=>{
50
+
51
+ return (
52
+
53
+ <div key={post.id}><p><Avatar src={post.photoURL} />{post.displayName}</p>投稿内容:{post.comment}<hr></hr></div>
54
+
55
+ );
56
+
57
+ })
58
+
59
+
60
+
61
+ const post= ()=>{
62
+
63
+ Api.addPost(
64
+
65
+ inputName,
66
+
67
+ currentUser.currentUser.photoURL,
68
+
69
+ currentUser.currentUser.displayName,
70
+
71
+ currentUser.currentUser.uid
72
+
73
+ );
74
+
75
+ setInputName("");
76
+
77
+ }
78
+
79
+
80
+
81
+ return(
82
+
83
+ <div>
84
+
85
+ {currentUser.currentUser ?
86
+
87
+ (
88
+
89
+ <>
90
+
91
+ <form>
92
+
93
+ <textarea
94
+
95
+ placeholder="Post"
96
+
97
+ value={inputName}
98
+
99
+ onChange={(e)=>setInputName(e.currentTarget.value)}
100
+
101
+ />
102
+
103
+ <button type="button" onClick={()=>post()} disabled={inputName.length >0 ? false:true}>投稿</button>
104
+
105
+ </form>
106
+
107
+ </>
108
+
109
+ ) : (
110
+
111
+ <>
112
+
113
+ <div>
114
+
115
+ <p>loginして投稿してください</p>
116
+
117
+ <p><Link to="/login">ログイン</Link></p>
118
+
119
+ </div>
120
+
121
+ </>
122
+
123
+ )}
124
+
125
+ <div>
126
+
127
+ <h2>コメント</h2>
128
+
129
+ <ul>{todoList}</ul>
130
+
131
+ {console.log(Lists)}
132
+
133
+ </div>
134
+
135
+
136
+
137
+ </div>
138
+
139
+ )
140
+
141
+ }
142
+
143
+
144
+
145
+ export default MessageSender;
146
+
47
147
  ```
48
148
 
49
149
  api.js