[reactjs] タグが付いた質問

Reactはユーザーインタフェースを組み立てるためのJavaScriptライブラリです。宣言的なパラダイムによって、あなたのアプリケーションがどう動作しているかをわかりやすくすると共に、効率が良くかつ変更を容易にすることを目標としています。

86 未回答やベストアンサーなし質問
絞り込み
並べ替え
タグ付けされた
2
1 回答
97 閲覧数

Typescript で作成しているアプリのクラスのメソッドが自分の想定通りに動きません。

学習のためReact+Typescriptでブラウザで動くチェスのアプリを作成しています。駒を動かす動きは自分の想定通りに動くものができたのですが、キャスリングの動き(キングとルークという二つの駒を同時に動かす)を実装しようとした際に作ったメソッドが自分の想定通りに動きません。 // --snip-- export abstract class Piece { position: ...
user53251's user avatar
2
0 回答
121 閲覧数

prettierにて、printWidthを300くらいにしているにも関わらず改行される

react、typescript, jsxといった技術スタックです。 prettierにて、printWidthを300くらいにしているにも関わらず、 jsxが以下のようになってしまいます。 <text>foo<text/> ↓ <text> foo <text/> typescript自体のコードはしっかり300になるのですが、 ...
thesnowman's user avatar
2
1 回答
278 閲覧数

useSWRとuseMemoを組み合わせたい

next.jsでページネーションを実装しています。 「{page}ページ目/{max_page}ページ中」と表示したい箇所があります。 max_pageはSWRでデータ件数をフェッチしてきた後に Math.floor(データ件数/1ページあたりの表示件数)という風に計算しています。 max_pageについてはページネーション遷移しても値は変わらないので、固定化したいところですが、...
redara's user avatar
  • 57
2
0 回答
385 閲覧数

React.jsをnpm startでブラウザに反映させていたのですが、誤ってcontrol + cをせずにVScodeごと切ってしまいました

React.jsをnpm startでブラウザに反映させていたのですが、誤ってcontrol + cをせずにVScodeごと切ってしまいました。 その後また別のReact.jsをnpm startしたら写真のようなエラーが発生しどのようにすれば消える(npm start出来る)かわかりません。 npm cache clean --force や rm -r node_modules の後再度 ...
Y.F's user avatar
  • 21
1
0 回答
58 閲覧数

ReduxでdispatchしpayloadからのuseEffectを実行しその中のuseStateのセット関数で更新した値で判定する方法

タイトルが分かりにくくて申し訳ありません。 useStateのセット関数で更新した値をすぐに参照したのですが、更新前の値が取れてしまいます。 useStateの更新はすぐに実行されないというのは知っています。 やりたいこと イベント内でuseStateの更新後の値をすぐに参照したいです。 概要 イベント内でリストを再取得し、再取得後のリスト件数(multipleList.length)...
Tatsuya's user avatar
  • 11
1
0 回答
181 閲覧数

Reactで作成したSPAをNginxでホスティングする時のdefault.confの設定を教えてください。

Reactで作成したSPAをNginxでホスティングしたいです。 その際に、パスの設定を/login/hoge, /login/fugaのように/login/から始まるパスにアクセスした場合にReactのSPAにルーティングするように設定したいです。 現在以下のように設定を行ったのですが、うまくいきません。 default.conf server { listen 80; location ...
sasa1009's user avatar
1
0 回答
301 閲覧数

Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0

データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。 Next13, prisma, postgreSQL, railway, tailwind で作りました。 レポジトリはこちらです。 https://github.com/satoshi02198/Task-maker ...
Satoshi Okazaki's user avatar
1
0 回答
37 閲覧数

redux-toolkitで、あるstateのプロパティの変更を基にそのstateの別プロパティを変更することは可能かどうか

現在Reactで開発をし、redux-toolkitでstate管理をしています。 そこで質問なのですが、例えば下記のようなsliceがあったとします。 sliceとしては、user毎に異なるitemsを持っているため、userが変わればitemsも変わるようにstateを変更したいと考えています。(storeは省略しています) testslice.js import { createSlice }...
carenm's user avatar
  • 21
1
0 回答
328 閲覧数

React+FastAPIでのCORSエラーの対処について

React+FastAPIでWebサイトを作成しました。FastAPI側では公式ドキュメントを読んでCORS対策しましたが、CORSエラーが出てデータをサーバーに送れません。何が原因なのでしょうか? 特徴 1.POST送信時のみエラーが出る。(GETメソッドでは起きない。) 2.ローカル環境(ReactとFastAPIは別ポート)ではPOST, GETとも問題なく動作する。 3....
doraemon's user avatar
1
1 回答
123 閲覧数

MUIのYearPickerのSelectedカラーを変更する方法はありますか?

muiのDatePicker APIを使用しています。 年度選択時のバックグラウンドカラーを変更したいのですが、方法が見つかりません。 日付選択はPickersDayコンポーネントのsxにstyleを指定して、それをDatePickerのrenderDayに渡せば変更できました。 方法をご存知の方、よろしくお願いいたします。
teidlldga's user avatar
1
0 回答
304 閲覧数

Cannot use JSX unless the '--jsx' flag is provided.がでてJestが使えない

前提 バックエンド側(RoR)とフロントエンド側(React TypeScript *一部JavaScript)に分けてDockerで開発を行っています。フロントエンド側でテストを使用したいと思ったので、Jestをインストールし、テストを走らせましたが、なぜかテストファイルの初期値でもエラーが起きてしまいます。 発生している問題・エラーメッセージ $ docker-compose exec ...
senseIY's user avatar
  • 41
1
0 回答
958 閲覧数

javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象

Reactを用いて以下のようなコンポーネントを作成しました。 文字が入力された際、それが数字であるなら半角化して反映します。 全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。 const InptArea:FC=()=>...
A.takagi's user avatar
1
0 回答
79 閲覧数

webRTCアプリがHeroku上で動作しない(simple-peer、socket.io)

ローカルでは動作するwebRTCアプリがHeroku上では動作せず困ってます。 My Heroku App: https://rgvc-client.herokuapp.com/ Github client: https://github.com/sayagit/RGVC-client Github server: https://github.com/sayagit/RGVC-server ...
sayaka's user avatar
  • 13
1
0 回答
75 閲覧数

react typescript materialUIを使ったスタイルの当て方

環境 ・reactとTypescriptを使っています ・デザインはmaterial UIを使っています。 ・スタイルlはstyled-componentsで当てています。 わからないこと Material UIからText Fileldをimportしてきてstyled-componetsを使ってスタイルを当てました。 しかし下記のようなエラーが出てしましました。 ...
aahhuhuhu's user avatar
  • 111
1
0 回答
628 閲覧数

react nativeでpretterとeslintを使用するときのコード整形について

解決したいこと 拡張子.jsで書くreact nativeのpretterとeslintでのコード整形について typescriptで書くときに悩まされる下記のerrorについて 前提 react native を書いています。コード整形でpretterとeslintを使用しています。 問題 ここでうまく行かないことがあります。 ファイルの拡張子を.js でreact ...
asai's user avatar
  • 11
1
1 回答
238 閲覧数

react.jsで作ったコンポーネントの動作がスマホのchromeだけ違う

reactの練習で、create-react-appで作成したアプリのapp.jsを書き換えたり、簡単なコンポーネントを作って読み込んで動かしたりしています。 NumberOfGamesコンポーネントが入力欄、PrintBasicInfoコンポーネントが入力内容表示部分、 入力欄に入力(あるいは削除)する度にstate.placeが書き換えられて表示部分も変化する。 App....
森口万太郎's user avatar
1
0 回答
1,138 閲覧数

react,material-uiのselectにて、labelと要素が重なって表示される

以下のような形で、reactにてmaterial-uiを使用し、セレクトボックスを作成しています。 しかし、labelとセレクトボックス内の要素が重なって表示されてしまいます。 どのような観点で修正を実施すればよいかご教示いただければ幸いです。 componentWillMount() { navigator.mediaDevices.enumerateDevices()....
thamada's user avatar
  • 37
1
0 回答
101 閲覧数

オプティマイズリー (Optimizely A/B テスト)でのReact.jsの記述

ターゲットにしたいページが、React.jsで動いている為 JQueryやVanila JS での記述ではなく全てReact での記載でエレメントを書き換えたいと考えております。今まで、cssとjQueryでの記載しかしたことがなく、React.jsで全て動いているページをターゲットにしてオプティマイズリー上で上書きしたくてもできません。HTMLの削除、css追加なども全く効かない状態です。 ...
GoroMktn's user avatar
1
0 回答
300 閲覧数

Firebase Hostingでリダイレクト処理ができない

Firebase Hostingを用い、React(ルーティングにはreact-router-domを使用)にてWEBアプリを公開しようとしています。basic認証を行いたいのですが、index.htmlを起点としたSPAなので、cloud functionsを通してルーティング処理をしようとしていますが、うまくいきません。 実装の内容としては以下リンクにあるような「basic-auth-...
oke's user avatar
  • 53
1
1 回答
210 閲覧数

redux-form(v6)をtypescriptで使いたい

redux-formをtypescriptで利用しているかに質問です。 やりたいことは「redux-form(v6)をtypescriptで使いたい」です。 typescriptはv2を利用。 redux-formの型定義を@typesで取得するとv4のものが取得されます。 https://gist.github.com/rluiten/...
yonaka's user avatar
  • 11
0
2 回答
56 閲覧数

React Routerを使ってログインボタンを押したら別のコンポーネント ページに遷移する書き方について教えて頂きませんか?

現在Reactを勉強中の者ですが最近Reactでログインページを作成して例えば登録ボタンを押すと別のコンポーネント ページに遷移できることを実行したいのに書き方が分からずエラーでつまずいてしまいます。 例えば Signin.jsに以下を定義してもページ遷移できずいろいろ調べても解決できずこまっています。 import { BrowserRouter as Router, Route, Routes ...
平田信一's user avatar
0
0 回答
26 閲覧数

Material TailwindのProの利用可能コンポーネント数

Material TailwindのProはどれくらいの数のコンポーネントを利用できますか?
Yodai's user avatar
  • 1
0
0 回答
48 閲覧数

Reactのstateが更新されない

やりたいこと Reactを使ったWebアプリのフロントエンド部分で、ユーザーがformに入力した値でstateを更新したい。 状況 ユーザーがformに入力してもsubmitを押してもstateが更新されない。 useStateを別のstateの中に入れたことが原因と推測していますが、解決策が分かりません。 ディレクトリ構成 front ├── node_modules │ └── ... ├─...
ryohassay's user avatar
0
0 回答
37 閲覧数

react,muiで汎用性の高いButton+Popoverを作りたい

react,typescriptでMUIを用いたソフトを開発しています。 その中で「あるボタンを押すとOK,Cancelの確認を表示し、OKなら続ける」ような場面が複数あります。 普通に実装するとButtonとPopoverを持ったコンポーネントでanchorElをuseStateで定義して~となりますが、色んな所でほぼ同じ処理を書くのが面倒だったり、表示や処理部分を使いまわしたい場面があります。 ...
shino's user avatar
  • 11
0
0 回答
71 閲覧数

nextjs上のサーバーサイドでsupabaseのデータをフェッチする方法について

supabase上にpostsというテーブルを作成し、3つデータを追加しました。 そのうえでsupabase上でpostsのデータをすべて取得したいと思い以下のコードを実行すると取得したデータが空になってしまします。 const { data: posts } = await supabase.from("posts").select("*"); ...
KeisukeKaji's user avatar
0
1 回答
124 閲覧数

react 18.3.0 の `use` による再レンダリングが複数回発生してしまう

react 18.3.0 の use を使ったfetchとSuspenseを行いたいのですが、複数回(ときには無制限)の再レンダリングが発生してしまっています。 解決方法を教えてください。 react: 18.3.0-canary-3ff846d10-20230724 next: 13.4.12 以下のコードでトップページを開くと画面にDoneが表示されるまでの間、render ...
Isuke FUJIYAMA's user avatar
0
0 回答
39 閲覧数

react,typescriptで型定義が誤っている?ライブラリを使用する方法

React,TypeScriptで以下のサンプルのように1つの時系列に複数のグラフを表示し、値を確認したり範囲を指定した操作ができるグラフを作りたいと考えています。 https://software.es.net/react-timeseries-charts/#/example/cycling https://software.es.net/react-timeseries-charts/#/...
shino's user avatar
  • 11
0
0 回答
106 閲覧数

React-hook-formのRegisterを使った場合の値の受け渡しについて

ReactとNext.jsでWEBアプリを作っています。 メインのコンポーネントであるAppと、textarea専用のTextInputコンポーネントがあり、App内でTextInputコンポーネントを呼び出しています。 コンポーネントは分割した状態でないといけないのですが、できればregisterをつかった状態で、Appで入力された値をTextInputコンポーネントに渡す方法はないでしょうか。 ...
sier123s1's user avatar
0
0 回答
113 閲覧数

GitHub Pagesで公開したサイトの404ページを自作のものに変更したい

基本的な方法は公式にある通りで、 https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site つまり公開したルートディレクトリに404.htmlがあればそれを404ページとして利用するらしいです。 ...
Lyydia Ekroos's user avatar
0
0 回答
51 閲覧数

Next.jsでTwitter共有用画像が設定できない

AppRouterのNext.jsでの質問です Twitterの共有用画像を設定する際に、この公式ドキュメントにかいてあるような手法をとって行っているのですが、なぜか上手くいきません 上記のドキュメントの1つ目の方法である、「appディレクトリ直下にtwitter-image.pngを置く」という方法を選択してビルド&デプロイしたのですが、...
matuyama's user avatar
0
0 回答
37 閲覧数

ダークモードのスタイルが反映されない

"use client" // this is a client component import React from "react" import { useState } from "react" import { Link } from "react-scroll/modules" import { ...
ヂアミトール's user avatar
0
0 回答
63 閲覧数

Reactのフックについて

現在、Reactベースのアプリ開発をしています。 多くの入門書やページでは、子コンポーネントから親コンポーネントのstateを変更する際、以下のように値をセットするだけの関数を別に定義しているものが大抵なのですが、set関数自体を渡すことになにか問題があるのでしょうか? const ComponentA = () => { const [value, setValue] = ...
kuu13580's user avatar
0
0 回答
216 閲覧数

Reactによるcsvの出力形式について

Reactで以下のような機能を実装しようとしています. HTML View <表の行数を指定するプルダウンリスト> セル1 セル2 セル3 セル4 セル5 1  2 データ1 データ2 データ3 2 3 データ4 データ5 データ6 上記のようなtable要素を生成しています.tableの行数は,プルダウンリストで指定し,動的に変化します. このtableに入力された値を,...
Toku's user avatar
  • 1
0
0 回答
92 閲覧数

React Routerの設定について Error: Invariant failed: Browser history needs a DOM

実現したいこと https://reffect.co.jp/react/react-firebase-auth#React_Router このサイトの7 React Routerの設定の最初の部分を実装したいです。 前提 6のユーザー情報の共有の部分まではできていて実際に動いているのですが、 を書いた途端に以下のエラーが出て動いてくれません。 react-router-...
tomatoboy's user avatar
0
0 回答
92 閲覧数

sendgridを利用したお問い合わせがvercelにデプロイすると送信されない

ローカルではメールが届いているが、デプロイして本番にあげた途端届かない事象が起きました。 vercelのログを見ると200は返してるので送信自体は成功しているっぽい。けど実際にメールが届かない... sendgridのActivity見ても反映されていない...basic認証かけてたせいかと思ったけど無くしても意味なく... 同じ現象に遭遇した方いませんか? 一応参考にしたサイト https://...
Dipitto's user avatar
0
0 回答
73 閲覧数

ローカルストレージに保存しているデータをmySQLに保存したい

reactで簡単なノートアプリを作成しました。 アプリとしては、タイトルと内容を書き込んだものがプレビューに表示され、ローカルストレージに保存される作り込みとなっています。 ・やりたいこと ローカルストレージではなく、MySQL内のデータベースに保存したいです。 バックエンドはNode.js(express)×MySQLを用いて試みましたがうまくいきませんでした。 バックエンド→...
yuuki's user avatar
  • 1
0
0 回答
110 閲覧数

React-nativeでエラー画面を実装したいが、エラー画面が真っ白になってしまう。

React nativeのNavigationで共通のエラー画面を作りたいのですが、遷移させてみても画面が真っ白です。 こういった実装はできないのでしょうか。 App.tsx import {NavigationContainer} from "@react-navigation/native"; import React from "react"; ...
handat's user avatar
  • 1
0
0 回答
192 閲覧数

MUIのAutoCompleteでoptionで用意されている選択肢を選んだ時にその値を取得したい

現在ReactでコンポーネントはMUIを使い、state管理はreduxで開発を行っています。 AutocompleteのfreeSoloでユーザーからの入力を受け付ける、かつ、optionsで用意されている選択肢からも値を選べるようにしたいです。 しかし、下記のコードですと、ユーザーからの入力があった際はe.target.valueに値が入っており、...
carenm's user avatar
  • 21
0
0 回答
44 閲覧数

Reactでロードした後、Firebase/Firestore の情報を表示する実装方法がわからない

ReactでTrello風アプリの実装をしています。 ロードした後、Firebase/Firestore の情報を表示する実装方法がわからない為ご協力頂きたいです。 参考にした動画: ReactでTrello風タスク管理アプリの作り方【Reactアプリ開発】 (YouTube) 現時点で実装済みの内容 ・ドラッグ&ドロップの実装 ・タスクの追加・削除 ・タスクカードの追加・削除 ・...
kabao_state's user avatar
0
0 回答
139 閲覧数

React router v6 useLocation stateの保存について

useNavigateとuseLocationで、一度発行したapiの情報を保存して、一度取ってきたことのあるapiの情報であれば、apiから取得せず保管されているものを利用するということを実現したいです。
mokupo's user avatar
  • 1
0
0 回答
58 閲覧数

redux-toolkitのextraReducersでaction.payloadのprepareをするにはどうしたらよいか

今、Reactで開発をしており、そのステート管理としてredux-toolkitを使用しております。 下記は自分が作成しているsliceですが、下記のようにprepareで指定すれば、reducersのaction.payloadをカスタマイズできるところまでは理解しております。 しかし、非同期で通信し、その返却値であるaction.payloadをカスタマイズしたい場合、...
carenm's user avatar
  • 21
0
0 回答
150 閲覧数

ReactPlayer(hls.js)でHLS配信を実現 CloudFrontエラー「The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*'」

ReactPlayer(hls.js)を用いて、HLS配信を行おうと考えています。 HLS配信を行う為に必要なS3やCloudFrontの設定は一通りしたつもりですが、動画配信画面でエラーが出ています。 Access to XMLHttpRequest at 'https://cdn.hogehoge.com/movies/hogehoge.m3u8' from origin 'https://...
Kazk's user avatar
  • 13
0
0 回答
177 閲覧数

githubからcloneしたreactプロジェクトでnpm startができない。

環境 ProductName: macOS ProductVersion: 12.6.1 BuildVersion: 21G217 node: v19.3.0 npm: 9.2.0 前提 現在、reactの学習を始めたプログラミング初学者です。 課題 create-react-appで作成したreactのプロジェクトをgithubで管理していました。 ...
takuma's user avatar
  • 23
0
0 回答
30 閲覧数

KeyOfを使ったInterfaceの複数の実装

export interface Alarm { shopNumber?: number; shopName?: string; daiNo?: number; errorCode?: number; errorContents?: string; occurrenceDateTime?: string; }; export interface ...
ぴよさん's user avatar
0
0 回答
82 閲覧数

直接importしたjsonはサーバ・フロント間でどのように扱われますか?

Next.jsを用いてフロント開発を行っております。 ホスティング先はVercelを用いています。 下記コードのように、表示したいデータが詰まったjsonファイルをimportした時、 サーバ・フロント間での扱われ方、パフォーマンスに関する認識について質問させて下さい。 import datalist from '.master/datalist.json'; export default ...
cRR's user avatar
  • 3
0
0 回答
89 閲覧数

Headerコンポーネントでmicrocmsから記事データを取得をしたい

next.js microcmsでサイトを作成しており、index.jsxでは「getStaticProps」を使ってfiledのjsonのデータを 取得できますが、Headerコンポーネントでは受け取ることができません。 index.jsxでは受け取れて、なぜHeaderコンポーネントでは受け取ることができないのか理解ができないので 解決方法がわからず困っております。 ...
Haruka's user avatar
  • 1
0
0 回答
146 閲覧数

POSTした後、mutateでデータが更新されない swr fetcher

何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。 データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。 一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。 import { useState } ...
user6894661's user avatar
0
2 回答
878 閲覧数

React のルーティング設定で真っ白な画面が表示されてしまう

Reactの画面遷移のためにルーティングを学習中です。 下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。 ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎 最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。 そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。 ...
tomo kuma's user avatar
0
1 回答
158 閲覧数

docker-composeで作成したReactアプリがlocalhost以外の任意のホスト名から接続できる。

create-react-appで作成されたReactのアプリに localhost:3000 と app.hoge.hoge:3000 というホスト名で同じページに接続出来ます。 reactアプリの環境変数HOSTやpacakege.json にホスト名を変更するような記述が見られないのにどうしてこのような動作をするのか不思議でたまりません。 ...
wataru's user avatar
  • 1,123
0
1 回答
328 閲覧数

Next.jsで上手くreact-draft-wysiwygが動かない

下記のページを参考に、Next.jsでreact-draft-wysiwygを導入しようと考えています。 ブラウザ上で動くリッチなテキストエディタを、React Draft Wysiwygを使って手軽に実装する 実現したいこと react-draft-wysiwygを動かして、入力内容を const [editorState, setEditorState] = useState("&...
しゅんぺい's user avatar