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

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

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

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

Q&A

解決済

Reactで並べ替えが上手くいかない

Shmupeiii
takoyan

総合スコア104

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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

3回答

0グッド

0クリップ

435閲覧

投稿2022/10/14 13:24

前提

現在ポートフォリオを作成しています。

URL
https://manga-kousatu-net.vercel.app/

id sample123@gmail.com
pass sample345!

github
https://github.com/takoyan33/manga-kousatu.net/tree/new-main

実現したいこと

ここに実現したいことを箇条書きで書いてください。

トップページで、今昇順で並んでいるのをボタンをクリックすると
昇順になるように変更したいと考えています。
処理としては、

JavaScript

1 const databaseRef = collection(database, "CRUD DATA"); 2 const u = query(databaseRef, orderBy("createtime", "desc")); 3 4const handleSort = async () => { 5 await onSnapshot(u, (querySnapshot) => { 6 setFiredata( 7 querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })) 8 ); 9 }); 10 };

こちら順番の変更はでできたのですが、
これを

<button onClick={handleSort} className="m-4"> 降順 </button>

としても表示が上手く変更されません。
理由がわかる方がいればよろしくお願いします。

該当のソースコード

JavaScript

1import Link from "next/link"; 2import { useEffect, useState, useMemo } from "react"; 3import { app, database } from "../firebaseConfig"; 4import { 5 collection, 6 getDocs, 7 doc, 8 updateDoc, 9 onSnapshot, 10} from "firebase/firestore"; 11import { useRouter } from "next/router"; 12import { getAuth, signOut } from "firebase/auth"; 13import { MuiNavbar } from "../layouts/components/MuiNavbar"; 14import Button from "@mui/material/Button"; 15import Stack from "@mui/material/Stack"; 16import Box from "@mui/material/Box"; 17import TextField from "@mui/material/TextField"; 18import Grid from "@material-ui/core/Grid"; 19import Head from "next/head"; 20import { Cardpost } from "../layouts/Cardpost"; 21import Avatar from "@mui/material/Avatar"; 22import { Loginbutton } from "../layouts/components/button/loginbutton"; 23import { Registerbutton } from "../layouts/components/button/registerbutton"; 24import { createContext } from "react"; 25import { query, orderBy, limit } from "firebase/firestore"; 26 27export const LoginContext = createContext( 28 {} as { 29 text: string; 30 } 31); 32 33export default function Index() { 34 const [ID, setID] = useState(null); 35 const [title, setTitle] = useState<string>(""); 36 const [context, setContext] = useState<string>(""); 37 const [email, setEmail] = useState<string>(""); 38 const [categori, setCategori] = useState<string>(""); 39 const [firedata, setFiredata] = useState([]); 40 const [createtime, setCreatetime] = useState(""); 41 const [isUpdate, setIsUpdate] = useState<boolean>(false); 42 const databaseRef = collection(database, "CRUD DATA"); 43 const q = query(databaseRef, orderBy("createtime")); 44 const u = query(databaseRef, orderBy("createtime", "desc")); 45 const [displayname, setDisplayName] = useState<string>(""); 46 const [createObjectURL, setCreateObjectURL] = useState<string>(null); 47 const [downloadURL, setDownloadURL] = useState<string>(null); 48 const [image, setImage] = useState<string>(""); 49 const [result, setResult] = useState<string>(""); 50 const [photoURL, setPhotoURL] = useState<string>(""); 51 const [likes, setLikes] = useState<number>(null); 52 const [userid, setUserid] = useState<string>(null); 53 const [netabare, setNetabare] = useState<string>(""); 54 const [opentext, setOpentext] = useState<boolean>(false); 55 const styles = { whiteSpace: "pre-line" }; 56 const [searchName, setSearchName] = useState(""); 57 const [selected, setSelected] = useState(["最終回"]); 58 const [sort, setSort] = useState({}); 59 60 let router = useRouter(); 61 const auth = getAuth(); 62 const user = auth.currentUser; 63 64 const getData = async () => { 65 await onSnapshot(q, (querySnapshot) => { 66 setFiredata( 67 querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })) 68 ); 69 }); 70 }; 71 72 73const handleSort = async () => { 74 await onSnapshot(u, (querySnapshot) => { 75 setFiredata( 76 querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })) 77 ); 78 }); 79 }; 80 const getID = ( 81 id, 82 title, 83 context, 84 downloadURL, 85 categori, 86 cratetime, 87 displayname, 88 netabare, 89 photoURL, 90 userid, 91 likes, 92 selected 93 ) => { 94 setID(id); 95 setContext(context); 96 setTitle(title); 97 setDisplayName(displayname); 98 setDownloadURL(downloadURL); 99 setIsUpdate(true); 100 setCategori(categori); 101 setCreatetime(cratetime); 102 setNetabare(netabare); 103 setPhotoURL(photoURL); 104 setUserid(userid); 105 setLikes(likes); 106 setSelected(selected); 107 console.log(title); 108 }; 109 110 useEffect(() => { 111 getData(); 112 }, []); 113 114 const updatefields = () => { 115 let fieldToEdit = doc(database, "CRUD DATA", ID); 116 updateDoc(fieldToEdit, { 117 title: title, 118 context: context.replace(/\r?\n/g, "\n"), 119 }) 120 .then(() => { 121 alert("記事を更新しました"); 122 setContext(""); 123 setTitle(""); 124 setIsUpdate(false); 125 getData(); 126 }) 127 .catch((err) => { 128 console.log(err); 129 }); 130 }; 131 return ( 132 <div> 133 <Head> 134 <title>Manga Study</title> 135 <meta name="description" content="漫画考察.net" /> 136 <link 137 href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" 138 rel="stylesheet" 139 /> 140 <link rel="icon" href="/favicon.ico" /> 141 </Head> 142 143 <MuiNavbar /> 144 {/* 145 <Button color="inherit" onClick={logout}> 146 ログアウト 147 </Button> */} 148 149 <div className="max-w-7xl m-auto"> 150 <br></br> 151 <br></br> 152 <p className="text-center"> 153 <img 154 src="./images/book-reading.png" 155 className="w-40 my-6 m-auto" 156 alt="漫画のイラスト" 157 /> 158 </p> 159 <h2 className="my-5 text-center"> 160 <img 161 src="./magastudylogo.png" 162 className="w-80 my-12 m-auto" 163 alt="ロゴ" 164 /> 165 </h2> 166 <p className="my-5 text-center"> 167 Manga Studyでは、人気漫画の考察を<br></br> 168 自由に投稿・閲覧できるwebサイトです。 169 <br></br> ※非収益サイトです 170 </p> 171 <br></br> 172 {!user && ( 173 <> 174 <Stack className="text-center m-auto w-full "> 175 <Registerbutton text="新規登録はこちら" /> 176 <br></br> 177 {/* usecontextを使用 valueを送る*/} 178 <LoginContext.Provider value={{ text: "ログインはこちらです" }}> 179 {/* loginbuttonに向けて*/} 180 <Loginbutton /> 181 </LoginContext.Provider> 182 <br></br> 183 <div></div> 184 </Stack> 185 </> 186 )} 187 {user && ( 188 <div className="lg:text-right text-center"> 189 <Button variant="outlined" className=""> 190 <Link href="/post">新規投稿をする</Link> 191 </Button> 192 </div> 193 )} 194 <p className="text-1xl text-center">投稿数 {firedata.length}</p> 195 <br></br> 196 <TextField 197 id="outlined-basic" 198 label="考察記事を検索する" 199 variant="outlined" 200 onChange={(event) => { 201 setSearchName(event.target.value); 202 }} 203 /> 204 <span className="m-4 "> 205 <button onClick={getData}>昇順</button> 206 </span> 207 <button onClick={getData} className="m-4"> 208 降順 209 </button> 210 <button onClick={getData} className="m-4"> 211 いいね順 212 </button> 213 <br></br> 214 <br></br> 215 <Grid container className="m-auto"> 216 {firedata 217 .filter((data) => { 218 if (searchName === "") { 219 return data; 220 //そのまま返す 221 } else if ( 222 data.title.toLowerCase().includes(searchName.toLowerCase()) 223 //valのnameが含んでいたら小文字で返す 含んでいないvalは返さない 224 ) { 225 return data; 226 } 227 }) 228 .map((data) => { 229 return ( 230 <Cardpost 231 key={data.id} 232 downloadURL={data.downloadURL} 233 title={data.title} 234 categori={data.categori} 235 netabare={data.netabare} 236 context={data.context} 237 createtime={data.createtime} 238 displayname={data.displayname} 239 email={data.email} 240 id={data.id} 241 photoURL={data.photoURL} 242 likes={data.likes} 243 selected={data.selected} 244 /> 245 ); 246 })} 247 </Grid> 248 </div> 249 </div> 250 ); 251} 252

補足情報(FW/ツールのバージョンなど)

{
"name": "croud-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.9.3",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^2.9.7",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.0.0-rc.1",
"@mui/styled-engine-sc": "^5.0.0-rc.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"firebase": "^9.8.4",
"moment": "^2.29.4",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hook-form": "^7.34.2",
"react-image-resizer": "^1.3.0",
"react-spinners": "^0.13.4",
"react-tag-input": "^6.8.1",
"react-tag-input-component": "^1.1.1",
"styled-components": "^5.3.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "^18.0.3",
"@types/react": "^18.0.15",
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"typescript": "^4.7.4"
}
}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

p19ljk

2022/10/15 08:09

handleSortでsortをhandleしてない(降順のみ)、getIDでIDをgetしていない(setしてるだけ)。 こういう関数名と処理の乖離は良くありません。

回答3

0

回答ありがとうございます。下記の回答を参考にしたら解決しました。
onclickの記述ミスでした

投稿2022/10/17 07:57

編集2022/10/20 08:52
Shmupeiii

総合スコア104

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/10/19 11:54依頼された後にこの回答は修正されています

こちらの回答が他のユーザーから「質問に対する回答となっていない投稿」という指摘を受けました。

0

handleSort使ってないのもそうですがgetDataとhandleSortの中身が同じに見えます。
sort, setSortのステートも使われていませんし。

他にも使われていない関数やステートがあったり、コードがわかりにくくなっている箇所があります。
filterに渡してる関数もreturnが足りないですね。
コードが複雑になりすぎていると思うので、関数やコンポーネントを分けた方がいいと思います。

投稿2022/10/15 05:26

ka2obushi

総合スコア173

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

p19ljk

2022/10/15 08:05

getDataとhandleSortの中身はonSnapshotの第一引数が異なっていますね。 getDataに渡しているqが昇順、handleSortに渡しているuが降順の取得クエリということでしょうね。
Shmupeiii

2022/10/17 07:58

回答ありがとうございます。 コードの記述量をできるだけ減らして整理したいと思います。

0

ベストアンサー

html

1<span className="m-4 "> 2 <button onClick={getData}>昇順</button> 3</span> 4<button onClick={getData} className="m-4"> 5 降順 6</button> 7<button onClick={getData} className="m-4"> 8 いいね順 9</button>

どのボタン押してもgetDataを呼んでるだけなので表示は変わらないのでは?
handleSort全く使ってないですよね

投稿2022/10/15 01:12

p19ljk

総合スコア146

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

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