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

何らかの理由で、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 Native 0.59.10とReact-Redux 5.0.7を使用しており、CPUにバインドされたパフォーマンスの問題が発生しています。この問題では、Reduxアクションが完了するまでに0.25秒かかります。 InstrumentsのTime Profiler構成を使用してプロファイルを作成しましたが、JSコードはシンボリック化されていません。 Chromeでのリモートデバッグは、「リモートインスペクター」ページをデバッグするだけのようで、まったく役に立ちません。 JS関数名/呼び出しに、ソースマップを作成/アタッチする方法、または以下に表示されるメモリアドレスを記号化する方法はありますか？

19 javascript  ios  xcode  react-native  instruments 

私は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 

var a; if (true) { a = 5; function a() {} a = 0; console.log(a) } console.log(a) コードスニペットを実行する結果を非表示スニペットを展開 上記のコードを見たところ、関数は{}で宣言されています。0 0と表示されると思いますが、0 5と表示されます。

18 javascript 

FirebaseでAngularを構成した後で「ng serve」を実行しようとすると、エラーが発生しました。このエラーメッセージをグーグルで検索しましたが、何も見つかりませんでした。エラーメッセージでは、この問題はライブラリ自体に関連しています。 user@user-MacBookPro post % ng serve 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: 404s will fallback to //index.html chunk {main} main.js, main.js.map (main) 2.15 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 127 kB …

17 javascript  angular  typescript  firebase 

今日、誰もがこの種の高次関数を使用して、少ないコードで期待できる結果を得ようとしています。しかし、これらの関数が内部でどのように機能するのか疑問に思います。 私が次のようなものを書いたとしましょう var numbers = [16, 25, 36]; var results = numbers.map(Math.sqrt); console.log(results); // [4, 5, 6] コードスニペットを実行する結果を非表示スニペットを展開 'number'配列の各要素が1つずつ反復していることを知っていますが、どうやって？ 探してみましたが、まだ満足のいく答えが得られませんでした。

17 javascript  node.js  dictionary  higher-order-functions 

オプションのチェーニング（obj?.param1?.param2）は素晴らしい機能のようですが、実際に実装して、入れ子になったifs、任意の関数、およびそのような単純な操作にはないものを取り除きたいと思っていました。 しかし、問題があります。それは機能しません。ノード12に更新しましたが、それでもエラーが発生します。 var dude = res?.param?.params[0] SyntaxError: Unexpected token '.' または var dude = res.param?.params[0] SyntaxError: Unexpected token '.' 何が問題ですか？ この機能を有効にするには、言語設定を変更するか、ライブラリをダウンロードする必要がありますか？それとも、まだ出ていないだけですか？

17 javascript  node.js 

次のように、さらにオブジェクトなどを含む配列を持つ単純なJSONがあります。 languagePack: [ { 'key': 'Username', 'value': 'Benutzername', 'group': 'default' }, { 'key': 'Password', 'value': 'Passwort', 'group': 'default' } ] しかし、私が本当に欲しいのは次のようなオブジェクトです： languagePack: { 'Username': 'Benutzername', 'Password': 'Passwort' } だから、私は配列を単純なキーと値のペアに減らしたいと思います。それは配列の中にあり、オブジェクト（キーは一意です）の中にさえあります。誰かがこれらのクールな配列関数のいくつかでこれを減らす方法を知っていますか？私はfor eachのようなものを思いついて、プロパティのオブジェクトを「手動で」プロパティを構築しましたが、 'reduce'、spread演算子（...）、map、every、一部など 私はそれを次のようなもので試しました： var temp = this.languagePack.map(([key, value]) => ({key,value})) console.log(temp) しかし、それだけでエラーメッセージが表示されました TypeError: Invalid attempt to destructure non-iterable instance 編集：3つの回答はすべて完全に問題なく機能しています。ありがとう。

17 javascript  arrays 

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 

overflow-xとにoverflow-y設定したリストがありますauto。さらに、モメンタムスクロールを設定したので、を使用してタッチスクロールがモバイルでうまく機能しwebkit-overflow-scrolling: trueます。 ただし、問題は、垂直にスクロールするときに水平スクロールを無効にする方法がわからないことです。左上または右上にスワイプするとテーブルが斜めにスクロールするため、ユーザーエクスペリエンスが非常に低下します。ユーザーが垂直方向にスクロールしているときは、ユーザーが垂直方向のスクロールを停止するまで、水平方向のスクロールは絶対にしたくない。 私は以下を試しました： JS： offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) …

17 javascript  html  css  angular  ionic-framework 

MessageRでSignalRを使用してJavaScriptとC＃の間で値をシリアル化および逆シリアル化すると、C＃で受信側の精度が少し低下します。 例として、値0.005をJavaScriptからC＃に送信しています。逆シリアル化された値がC＃側に表示されると、値が得られます0.004999999888241291。これは近いですが、正確には0.005ではありません。JavaScript側の値は、Number私が使用しているC＃側ですdouble。 JavaScriptは浮動小数点数を正確に表すことができず、のような結果につながる可能性があることを読みました0.1 + 0.2 == 0.30000000000000004。私が見ている問題は、JavaScriptのこの機能に関連していると思います。 興味深いのは、同じ問題が別の方向に進んでいるとは思えないことです。C＃からJavaScriptに0.005を送信すると、JavaScriptの値は0.005になります。 編集：C＃からの値は、JSデバッガーウィンドウで短縮されています。@Peteが述べたように、それは正確に0.5ではない何か（0.005000000000000000104083408558）に拡張されます。これは、矛盾が少なくとも両側で発生することを意味します。 JSONシリアライゼーションには同じ問題はありません。これは、値をネイティブの数値型に解析する際に受信環境を制御する文字列を経由すると想定しているためです。 バイナリシリアル化を使用して、両側で値を一致させる方法があるかどうか疑問に思っています。 そうでない場合、これはJavaScriptとC＃の間で100％正確なバイナリ変換を行う方法がないことを意味しますか？ 使用されるテクノロジー： JavaScript SignalRおよびmsgpack5を使用した.Netコア 私のコードはこの投稿に基づいています。唯一の違いは、私が使用していることですContractlessStandardResolver.Instance。

16 javascript  c#  signalr  msgpack  binary-serialization 

CSSで点線の円を作りたかったので、以下の手順で作成しました。 この処理で破線の円を表示することはできましたが、破線の終点と始点の間隔が狭くなり、間隔が均一でなくなりました。 .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> コードスニペットを実行する結果を非表示スニペットを展開 ギャップを均一にする方法はありますか？ダッシュ間のギャップも制御できますか？ CSSだけではそれが不可能な場合は、JavaScriptなどを使用することを検討しています。

16 javascript  html  css 

私は、1つのファイルに含まれる約5つの異なるES6クラスで構成される比較的小さなNPMパッケージを作成しました。それらはすべて次のように見えます。 export default class MyClass { // ... } 次に、パッケージのエントリポイントを次のように設定しました。 export { default as MyClass } from './my-class.js'; export { default as MyOtherClass } from './my-other-class.js'; 次に、エントリポイントをwebpackとbabelを介して実行し、最終的には変換されて縮小されたindex.jsを生成します。 パッケージのインストールとインポートは正常に機能しますが、クライアントコードから以下を実行すると、 import { MyClass } from 'my-package'; "MyClass"をインポートするだけでなく、すべてのクラスのすべての依存関係を含むファイル全体をインポートします（私のクラスの一部には大きな依存関係があります）。 すでにバンドルされているパッケージの一部をインポートしようとすると、webpackがどのように機能するかわかりましたか？したがって、私はnode_modules/my-packagebabelも実行するようにローカルのWebpack構成をセットアップしてから、次のことを試しました。 import { MyClass } from 'my-package/src/index.js'; ただし、これでもindex.jsによってエクスポートされたすべてのクラスがインポートされます。私が望むように機能しているように見える唯一のことは、私がそうするならば： import MyClass from 'my-package/src/my-class.js'; しかし、私はむしろむしろ： 変換され縮小されたファイルをインポートできるため、node_modules内でbabelを実行するようにwebpackに指示する必要がありません。 各ファイルへのパスを入力する代わりに、エントリポイントから個々のクラスを直接インポートできる …

16 javascript  webpack  babeljs  es6-modules 

数字の表があります。テーブルのセルをクリックすると、アクティブ状態が切り替わります。1つのセルを選択してcrtlを押し、別のセルを選択すると、1番目と2番目のセルがアクティブになります。それを実装する方法？ codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else { event.target.className = 'cell active'; …

16 javascript  html  css 

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