現在Reactを用いてツイッターのようなユーザー一覧→相手のプロフィールのような画面を作りたいと思ってます。
写真の方が早いと思うので、共有いたします。
このような感じです。
こちらのHOME画面のボブこちゃんの写真をクリックしたらそのままプロフィール画面に反映させたいのですが、どのようにやればいいのでしょうか?
今回はこのような形で仮にオブジェクトでデータを作っております。
export const userItem = [ { name: "ボブこちゃん", uid: "222", img: "https://pbs.twimg.com/media/D55F7I0U8AA6IOz.jpg", }, { name: "ボブボブ", uid: "22222220d", img: "https://rr.img.naver.jp/mig?src=http%3A%2F%2Fimgcc.naver.jp%2Fkaze%2Fmission%2FUSER%2F20170415%2F13%2F10020013%2F35%2F271x361x8bec1495dd4b72f0208bad7c.jpg%2F300%2F600&twidth=300&theight=600&qlt=80&res_format=jpg&op=r", }, { name: "サイコパス", uid: "2969692220d", img: "https://mosty-media.imgix.net/post_image/image/66120/large_%E3%82%B5%E3%82%A4%E3%82%B3%E3%83%8F%E3%82%9A%E3%82%B9%E3%81%AA%E5%A5%B3%E6%80%A7__.jpg", }, { name: "ホストのこと刺した女", uid: "30022020d", img: "https://buzz-plus.com/wp-content/uploads/2019/05/takaoka-yuka1.jpg", }, { name: "横浜流星", uid: "23odme0d", img: "https://news-img.dwango.jp/uploads/medium/file/000/207/541/207541/lg_f54qavilswmhv4sc5lz.JPG", }, { name: "ボブ", uid: "dmee2", img: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTtniwOAKHEC_LBwBwLnDKoc6JWHY_vcfTLyg&usqp=CAU", }, ];
dummyhome
1import React, { useState } from "react"; 2import { userItem } from "./dummyuser" 3import Dummy from "./dumyprofile" 4export default function dumyhome() { 5 const [myprofile, setmyprofile] = useState(true) 6 const [name, setname] = useState("") 7 const [myuid, setmyuid] = useState("") 8 const [myimg, setmyimg] = useState("") 9 console.log(name, myuid, myimg) 10 return ( 11 <> 12 { 13 myprofile ? 14 userItem.map((item) => { 15 16 return ( 17 <> 18 <div> 19 <p>home画面ですよ</p> 20 </div> 21 <div onClick={() => { 22 setmyprofile(false) 23 }}> 24 <img style={{ width: "200px" }} src={item.img} /> 25 <p>{item.name}</p> 26 <p>{item.uid}</p> 27 </div> 28 </> 29 ) 30 }) : < Dummy username={name} userimg={myimg} useruid={myuid} /> 31 } 32 </> 33 ) 34} 35
dummyorofile
1import React from "react"; 2import ListItemAvatar from "@material-ui/core/ListItemAvatar"; 3import Avatar from "@material-ui/core/Avatar"; 4const firebase = require("firebase"); 5 6export default function dumyprofile(props: any) { 7 const cliked = (myuid: string) => { 8 const me = firebase.auth().currentUser 9 firebase 10 .firestore() 11 .collection("chats") 12 .add({ 13 users: [me.uid, myuid] 14 }); 15 setTimeout(() => { 16 window.location.href = '/chat'; 17 }, 500); 18 } 19 20 return ( 21 <> 22 <p>プロフィール画面ですよ</p> 23 <div> 24 <ListItemAvatar> 25 <Avatar> 26 <img style={{ width: "100%" }} src={props.userimg} alt="" /> 27 </Avatar> 28 </ListItemAvatar> 29 <p>{props.username}</p> 30 <p>{props.useruid}</p> 31 <button onClick={() => cliked(props.useruid)}>{props.username}の会社に応募する</button> 32 </div> 33 </> 34 ); 35} 36
こちらがコードとなります。
Userをステートで管理しようなど色々試して見たものの、mapのなかでsetStateを使うとrerenderしすぎというエラーが起きてしまうのでできませんでした。
どうにかして、ボタンクリックしたらそのユーザー情報を取得したいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。