タグ付けされた質問 「reactjs」

修正方法Could not find plugin "proposal-numeric-separator"：Reactアプリケーションをビルドしようとすると、このエラーが発生します。アプリケーションをまだイジェクトしていません。 ./src/index.js Error: [BABEL] /home/pc/Downloads/project/src/index.js: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/home/pc/Downloads/project/node_modules/babel-preset-react-app/index.js$0") at Array.map (<anonymous>) at Generator.next (<anonymous>) at Generator.next (<anonymous>) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. …

61 reactjs  build  yarnpkg 

反応ネイティブ0.61にアップグレードした後、次のような警告がたくさん表示されます。 VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead. 私がVirtualizedList-backed container使用するべき他のものは何ですか？なぜ今それをそのように使用しないように勧められているのですか？

39 javascript  reactjs  react-native 

React useStateフックを使用する標準的な方法は次のとおりです。 const [count, setCount] = useState(0); ただし、このconst count変数は明らかに異なるプリミティブ値に再割り当てされます。 なぜ変数は次のように定義されていないのlet countですか？

33 javascript  reactjs  ecmascript-6  react-hooks 

ここに問題があります：ボタンのクリックで2つの関数を呼び出そうとしています。どちらの関数も状態を更新します（useStateフックを使用しています）。最初の関数はvalue1を「新しい1」に正しく更新しますが、1秒後に（setTimeout）2番目の関数が起動し、値2を「新しい2」に変更します。これは、value1を「1」に戻します。なんでこんなことが起こっているの？前もって感謝します！ import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: "2" }); const changeValue1 = () => { setState({ ...state, value1: "new 1" }); }; const changeValue2 = () => { setState({ ...state, value2: "new 2" }); }; …

31 javascript  reactjs  react-hooks 

単純なreact-springブートアプリケーションを開発していますが、GitHubの問題のため、IntelliJを使用してアプリケーションスターターファイルを再作成し、前のアプリケーションのpackage.jsonファイルの依存関係データを使用してノードモジュールをインストールしました。 折りたたみナビゲーションバー（ハンバーガーバー->モバイルビューで折りたたむレスポンシブナビゲーションバー）を使用し、ハンバーガーボタンをクリックしてナビゲーションリンクを表示すると、以下のエラーが発生します。しかし、これらすべてのことは、以前のアプリケーションではうまくいきました。 TypeError: Cannot convert object to primitive value HTMLDivElement.<anonymous> C:/Users/Hasindu/Documents/AF/Application Frameworks/online-fashion-store-master/src/main/js/src/collapse.js:346 343 | ...typeof config === 'object' && config ? config : {} 344 | } 345 | > 346 | if (!data && _config.toggle && /show|hide/.test(config)) { | ^ 347 | _config.toggle = false 348 | } 349 …

27 javascript  jquery  reactjs  bootstrap-4 

私は、Firebaseリスナーを使用して、クラウドFirestoreデータが反応フックの更新で更新される方法を理解しようとしています。 最初、私はこれを、componentDidMount関数を持つクラスコンポーネントを使用して作成し、firestoreデータを取得しました。 this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } それはページが更新されると壊れるので、フックを反応させるためにリスナーを移動する方法を理解しようとしています。 私はreact-firebase-hooksツールをインストールしましたが、それを機能させるための説明を読む方法がわかりません。 次のような関数コンポーネントがあります。 import React, { useState, useEffect } from 'react'; import { useDocument } from 'react-firebase-hooks/firestore'; import { BrowserRouter as Router, Route, Link, Switch, useRouteMatch, } from 'react-router-dom'; import …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

Reactアプリをデプロイしていますが、httpsでページにアクセスすると奇妙なエラーが発生します。 httpsでページにアクセスすると、次のエラーが表示されます。 SecurityError： 'WebSocket'の構築に失敗しました：安全でないWebSocket接続がHTTPS経由でロードされたページから開始されない可能性があります。 しかし、httpでページに移動すると、完全に機能します。 問題は、私が知る限り、WebSocketを使用していないことです。コードを検索して、httpsまたはwss：ではなく、httpへのリクエストがあるかどうかを確認しましたが、何も表示されません。 これまでに誰かに遭遇したことがありますか？ package.jsonファイルのコピーを含めています。デバッグに役立つコードの他の部分をアップロードする必要があるかどうかをお知らせください。 前もって感謝します。 { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "baffle": "^0.3.6", "cross-env": "^6.0.3", "react": "^16.12.0", "react-dom": "^16.12.0", "react-player": "^1.14.2", "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "react-typist": "^2.0.5", "webpack-hot-dev-clients": "^2.0.2" }, "scripts": { "start": "cross-env react-scripts start", "build": …

25 node.js  reactjs 

on react-native init ProjectNameでは、メインアプリファイルApp.jsに次のようにコンポーネントの宣言が含まれています。 const App: () => React$Node = () => {...} この指示はどういう意味ですか？ const App = () => {...}つまり、として定義されたコンポーネントに慣れているので、特に間の表現がわかりません: () => React$Node。

23 javascript  reactjs  react-native 

何らかの理由で、material-uiの日付ピッカーが機能しません。日付ピッカーがReactでレンダリングされるたびに、次のエラーがスローされます。 RangeError：書式文字列にエスケープされていないラテンアルファベット文字が含まれています n 日付ピッカー（https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js）だけでStackblitzを作成しましたが、そこにもエラーが表示されます。何が悪いのですか？私はインストールガイドのすべての指示に従っていたと思います。 material-ui / pickersへのリンク：https : //material-ui-pickers.dev/

19 javascript  reactjs  material-ui  material-ui-pickers 

私はReactを初めて使用するので、これを達成するのは非常に簡単かもしれませんが、いくつかの調査を行ったとしても、自分でそれを理解することはできません。これがばかげている場合、私を許してください。 環境 Laravel（バックエンド）アダプターとReact（フロントエンド）アダプターでInertia.jsを使用しています。あなたが慣性を知らないなら、それは基本的に： Inertia.jsを使用すると、クラシックなサーバー側ルーティングとコントローラーを使用して、最新の単一ページのReact、Vue、Svelteアプリをすばやく構築できます。 問題 私は、送信されたときにPOSTリクエストを実行して次のページをロードするフォームを持つ単純なログインページを実行しています。正常に動作しているようですが、他のページではコンソールに次の警告が表示されます： 警告：マウント解除されたコンポーネントでReact状態の更新を実行できません。これは何もしませんが、アプリケーションのメモリリークを示しています。修正するには、useEffectクリーンアップ関数ですべてのサブスクリプションと非同期タスクをキャンセルします。 ログイン中（慣性により作成） 関連コード（関係のない行を避けるために簡略化しました）： import React, { useEffect, useState } from 'react' import Layout from "../../Layouts/Auth"; {/** other imports */} const login = (props) => { const { errors } = usePage(); const [values, setValues] = useState({email: '', password: '',}); const [loading, setLoading] = useState(false); …

19 javascript  reactjs  promise  inertia 

数週間前にリリースされたReact Routerの新しいuseHistoryフックを使用しています。私のReact-routerのバージョンは5.1.2です。My Reactのバージョンは16.10.1です。私のコードは一番下にあります。 しかし、react-routerから新しいuseHistoryをインポートすると、次のエラーが発生します。 Uncaught TypeError: Cannot read property 'history' of undefined これは、React-routerのこの行によって引き起こされます function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

typescriptを使用して反応ルーターv5.1.2でUseHistoryフックを使用していますか？単体テストを実行すると、問題が発生します。 TypeError：未定義のプロパティ 'history'を読み取れません。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: '', search: …

18 reactjs  typescript  react-router  jestjs  enzyme 

React Material-UI（ https://material-ui.com/components/autocomplete/）。 デモコードでは、 <Autocomplete options={top100Films} getOptionLabel={(option: FilmOptionType) => option.title} style={{ width: 300 }} renderInput={params => ( <TextField {...params} label="Combo box" variant="outlined" fullWidth /> )} /> どのように機能するかはわかりますが、選択した値を取得する方法がわかりません。 たとえば、 onChangeプロップをこれして、選択に基づいていくつかのアクションを実行できるようにします。 追加してみた onChange={v => console.log(v)} ただし、v選択した値に関連するものは何も表示されません。

17 javascript  reactjs  material-ui 

約2年前にcreate-react-appを使用して作成したリアクションアプリ（アプリA）を使用していますが、削除されました。アプリはcommonjs2モジュールとしてエクスポートされ、NPMパッケージで出荷され、next.jsプロジェクト（アプリB）で使用されます。 アプリAのいくつかのパッケージを更新するまで、すべてが順調に進んでおり、使用するいくつかの汎用コンポーネントがあります。アプリBにインポートするときのエラーは、おそらくSSRが原因でウィンドウが定義されていなかったことです。 これを使用して、アプリAのwebpack構成でこれを解決しましたglobalObject: 'this'。 アプリBにアプリAをインポートしようとすると、エラーメッセージは次のようになります。 TypeError: Cannot read property 'webpackJsonp' of undefined どこかに電話しようとしているとwindow['webpackJsonp']思いますか？ 私はすでにwebpackJsonpFunctionを変更しようとしましたが、予想通り、undefinedの別のプロパティを取得しようとします。 どんな助けでも大歓迎です！ 完全なスタックトレース： [ error ] TypeError: Cannot read property 'webpackJsonp' of undefined at /Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2087 at Object.<anonymous> (/Users/syberen/projects/parentcompany/pblx-store-detail/build/static/js/main.js:1:2203) at Module._compile (internal/modules/cjs/loader.js:776:30) at Module.m._compile (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:473:23) at Module._extensions..js (internal/modules/cjs/loader.js:787:10) at Object.require.extensions.<computed> [as .js] (/Users/syberen/projects/parentcompany/companyname/node_modules/ts-node/src/index.ts:476:12) at Module.load (internal/modules/cjs/loader.js:643:32) at Function.Module._load …

16 reactjs  npm  webpack  next.js 

material-uiにMyStyledButton基づくカスタムボタン（）を作成しました。 Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button classes={{ root: buttonStyle.root }} …

16 javascript  css  reactjs  jestjs  enzyme