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

反応アプリでファイアストアのタイムスタンプを表示する方法を理解しようとしています。 「createdAt」という名前のフィールドを持つFirestoreドキュメントがあります。 私はそれを出力のリストに含めようとしています（ここで関連するビットを抽出して、フィールドのリスト全体を読む必要がないようにします）。 componentDidMount() { this.setState({ loading: true }); this.unsubscribe = this.props.firebase .users() .onSnapshot(snapshot => { let users = []; snapshot.forEach(doc => users.push({ ...doc.data(), uid: doc.id }), ); this.setState({ users, loading: false, }); }); } componentWillUnmount() { this.unsubscribe(); } render() { const { users, loading } = this.state; return ( …

10 javascript  reactjs  firebase  google-cloud-firestore  unix-timestamp 

Material ui SwipeableViewsを使用しています。ReactSwipableViewパッケージを使用していますが、コンソールでこのエラーが発生します。 react-dom.development.js：12466警告：componentWillReceivePropsの名前が変更されたため、使用をお勧めしません。詳細については、を参照してください。 データ取得コードまたは副作用をcomponentDidUpdateに移動します。 小道具が変更されるたびに状態を更新する場合は、メモ化手法を使用するようにコードをリファクタリングするか、静的なgetDerivedStateFromPropsに移動します。詳細については： 非厳密モードでこの警告を抑制するには、componentWillReceivePropsの名前をUNSAFE_componentWillReceivePropsに変更します。React 17.xでは、UNSAFE_名のみが機能します。非推奨のすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。 次のコンポーネントを更新してください：ReactSwipableView このエラーを取り除く方法はありますかUNSAFE_componentWillReceivePropsを試しましたが、何も変化しません

10 reactjs 

NginxとNodeJSサーバーでGzip配信を使用して、Next.jsで記述されたコードを圧縮しようとしています。 curl -H "Content-Encoding: gzip"確認に使用すると、設定が機能しているようです。 しかし、実際のブラウザー（Chrome、Firefox）に来るとContent-Encoding: gzip、応答ヘッダーにプロパティが見つかりません。 代わりに表示されX-Content-Encoding-Over-Network: gzipます。 私はGoogle Lighthouseを使用してサイトをテストしていますが、テキストファイルの圧縮を有効にしていると非難されます。 実際、どういうX-Content-Encoding-Over-Network意味ですか？ これでgzipを動作させるにはどうすればよいですか？ Nginx設定： gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.0; gzip_types text/css text/plain text/javascript application/javascript application/json application/x-javascript application/xml application/xml+rss application/xhtml+xml application/x-font-ttf application/x-font-opentype application/vnd.ms-fontobject image/svg+xml image/x-icon application/rss+xml application/atom_xml; Next.jsの設定 // next.config.js module.exports …

10 node.js  reactjs  nginx  gzip  next.js 

いくつかの状態が変化したときにあまりにも角のあるカスタムフックを作成しています。 配列で任意の状態を渡すことができるはずです。 import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return toggle } export default useFlatListUpdate そしてそれはとして使用されるべきです const toggleFlatList = useFlatListUpdate([search, selectedField /*, anything */]) しかし、それは私に次の警告を与えます React Hook useEffectの依存配列には、spread要素があります。これは、正しい依存関係を渡したかどうかを静的に検証できないことを意味します。eslint（react-hooks / …

10 reactjs  react-native  eslint  react-hooks 

開発環境では、私のアプリは問題なく動作します。本番環境では、次のエラーでクラッシュします。 Uncaught TypeError: (0 , _react.useEffect) is not a function これは、ReactをインポートしてuseEffectを次のように作成したファイルで発生します。 import React, { useEffect } from 'react' const X = () => { useEffect(() => { ... }) ... } この行のすぐ下にconsole.logを追加すると、本番環境ではuseEffectが実際に未定義であり、開発版では期待される機能であることを確認できます。 私は自分のpackage.json、yarn.lock、およびnode_modulesをチェックして、useEffectが導入された16.8.0未満である可能性のあるreactまたはreact-domバージョンを確認しました。しかし、すべて16.13.1であり、それらは主な依存関係であり、私は私の糸のキャッシュをきれいにし、node_modulesとyarn.lockを削除して、再インストールしようとしました。 追加と削除を試みpeerDependenciesましたが成功しませんでした。 2つの異なるバージョンのReactが実行されていないことを確認するためにチェックを入れましたがwindow.React1 = React、ライブラリwindow.React2 = React内とアプリケーション内に保存してチェックしています。 window.React1 === window.React2 それは本当だったので、それもそうではありません。 最後に、Reactのエイリアスをnode_modulesの特定のエイリアスに設定しようとしましたが、うまくいきませんでした。 機能することがわかった唯一の解決策は、次のようにインポートした場合です。 import React from 'react'; const …

9 javascript  reactjs  react-hooks  parceljs 

React-Reduxの新機能を使用するように新しいreact-reduxアプリケーションを構成しようとしています。公式ドキュメントは言います React Reduxは現在、既存のconnect（）高次コンポーネントの代わりとして一連のフックAPIを提供しています。 私はいくつかの実際の例でHooks APIに関連するいくつかのヘルプ記事を見つけようとしましたが、すべてのreact-reduxアプリは接続機能を使用しています。公式ドキュメントにも非常に基本的な例が示されています。 アプリの接続機能をuseSelector（Hooks APIによって提供される）で変更したい。 これが私のアプリケーションのコードスニペットの例です。 //MessagesListContainer export default connect( // mapStateToProps (state:State) => ({ activeUser: getActiveUser(state), messages: getMessagesList(state), }) )(MessagesList) //Selectors export const getActiveUser = (state: State) => state.activeUser; export const getMessagesList = (state : State) => ( Object.keys(state.messages).map((key : any)=> state.messages[key]) ) export interface IMessagesListProps { …

9 reactjs  typescript  redux  react-redux 

インターネット接続の可用性フラグを含むReactコンポーネントがあります。UI要素は、状態に応じてリアルタイムで動的に変更する必要があります。また、フラグの変更により、関数の動作が異なります。 現在の実装では、間隔を使用して毎秒Axiosを使用してリモートAPIをポーリングし、それに応じて状態を更新しています。このタスクを実行して、最小の計算コストで1秒の状態エラーを削除する、より詳細で効率的な方法を探しています。デバイスに外部インターネット接続がある場合にのみ、オンラインと見なされます 現在の実装： class Container extends Component { constructor(props) { super(props) this.state = { isOnline: false }; this.webAPI = new WebAPI(); //Axios wrapper } componentDidMount() { setInterval(() => { this.webAPI.poll(success => this.setState({ isOnline: success }); }, 1000); } render() { return <ChildComponent isOnline={this.state.isOnline} />; } } 編集： 外部インターネット接続を検出できるソリューションを探しています。デバイスは、外部接続のないLANに接続できます。したがって、オフラインと見なされます。デバイスが外部インターネットリソースにアクセスできる場合にのみ、オンラインと見なします。

9 javascript  reactjs  axios 

他の要素をいくつか保持しているコンテナ要素がありますが、画面サイズによっては、その一部がさまざまな部分で不可解に切り取られます。HTMLページの幅を調整（クリックしてドラッグ）すると、コードサンドボックスリンクの動作を確認できます。メインコンテナーの境界線のみがレンダリングされ、子要素が影響を受けないようにするにはどうすればよいですか？ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` height: 35%; width: 100%; display: flex; border: none; …

9 javascript  css  reactjs 

今日、突然、Typescriptでビルドされたプロジェクトでビルドエラーが発生し始めました。何週間も変更されていないファイル（またはそれが参照するもの）では、次のようになりました。 ./path/to/my/file.ts Line 0: Parsing error: Cannot read property 'name' of undefined このエラーは最初にCIで発生し、サーバーで手動で構築することで再現でき、すべてのパッケージを更新した後、ようやく自分のコンピューター（完全に実行されていた）で再現できました。現在、プロジェクトの古い（ビルド）コミットをプルしても、ビルドできません。私はyarn.lock自分のリポジトリにコミットしましたが、古いものでpackage.jsonもyarn.lock（削除node_modulesして実行しますyarn）、ビルドできません。 このエラーは、文字通り今日から始まりました。 その理由は何でしょうか？ 私の（おそらく関連する）バージョン： yarn 1.22.4, node v13.11.0, typescript 3.7.5 react 16.12 react-scripts 3.4.0 macOS 10.15 Catalina

9 reactjs  typescript  create-react-app  react-scripts  react-typescript 

react-pivottablejQueryデータテーブルビューでデータセット全体を表示する方法があるかどうか知りたいだけで実装しました つまり、以下のデータのすべてを表形式で表示したい列がいくつかあります。 [ 'SRN', 'MainSystemType', 'MagnetType', 'MagnetCoverType', 'MagnetRMMUType', 'MagnetHighOrderShimPowerSupply', 'GradientAmplifierType', 'GradientInterfaceType', 'GradientSwitchType', 'RFSystemB1FieldSystem', 'RFSystemFrontendInterface', 'CabinetsDasCabinet', 'ReconstructorAvailableMemory', 'ReconstructorNumberOfProcessors', 'AcquisitionSystemBulkBoardType', 'CabinetsCoolersCabinet', 'AcquisitionSystemType', 'PatientSupportPatientSupportType', 'PatientInterfaceMiscellaneousBoxType', 'PatientInterfacePPUType', 'PatientInterfaceType', 'PatientInterfaceAudioModule', 'PatientInterfaceAudioSwitchType', 'PatientSupportPowerSupplyUnit', 'RFAmpType', 'IOP_Firmware', 'RFP_Firmware' ], [ 108, 'WA15', 'WA_15T', 'Wide Aperture', 'MEU', 'NONE', '781', 'IGCIDNA', 'NONE', 'HIGH', 'TFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', 'DDAS', …

9 jquery  reactjs  database  datatable  pivot-table 

APIを呼び出すためのさまざまなメソッドがあるAPIサービスがあります。すべてのGETリクエストのテストに成功しましたが、POSTリクエストのテストに問題があります。 これがメソッドです： export default class ApiService { static makeApiCall = <T>( url: string, oneCb: <T>(d: Data) => T, secondCb: (d: T) => void, errorCb?: (a: ErrorModel) => void, method = 'get', data = {}, ): Promise<void> => { const config: AxiosRequestConfig = {}; if (method === 'post') { config.headers = …

9 javascript  reactjs  testing  ecmascript-6  jestjs 

私はいくつかのユニットテストを試みています、私は偽の例でサンドボックスを作成しましたhttps://codesandbox.io/s/wizardly-hooks-32w6l（実際にはフォームがあります） class App extends React.Component { constructor(props) { super(props); this.state = { number: 0 }; } handleSubmit = (number1, number2) => { this.setState({ number: this.handleMultiply(number1, number2) }) } handleMultiply = (number1, number2) => { return number1 * number2 } render() { const { number } = this.state; return ( <div …

9 javascript  reactjs  jestjs 

バンドルを開こうとしましたが、Androidの実行中に次のメッセージが表示されます 2020-01-05 23：15：45.366 26210-26210 / com.note.principal W / .note.principa：隠しフィールドLandroid / view / View;-> mAccessibilityDelegate：Landroid / view / View $ AccessibilityDelegate;へのアクセス （ライトグレーリスト、反射）2020-01-05 23：15：45.470 26210-26242 / com.note.principal E / ReactNativeJS：不変の違反：requireNativeComponent： "RNCSafeAreaView"がUIManagerに見つかりませんでした。 This error is located at: in RNCSafeAreaView in Unknown in Unknown in n in Unknown in Unknown in C in P …

9 javascript  android  reactjs  react-native  gradle 

だから、私はこの質問に対するいくつかの答えを探していたところ、インポート中に「React」はデフォルトのエクスポートであり、名前付きエクスポートではないため、{}にある必要はないことがわかりました。まあ、それは正しいですが、デフォルトのエクスポートをインポートするときに、インポート時に任意の名前を使用できます。ただし、この場合、使用できるのは以下のインポートのみです。 import React from 'react'; ではなく import Somename from 'react';

9 javascript  reactjs 

Material UIとそのテーマプロバイダー（JSSを使用）を使用しているアプリケーションがあります。 私は今、完全に本格的なReactライブラリーではないfullcalendar-reactを組み込んでいます。これは、元のフルカレンダーコードの薄いReactコンポーネントラッパーにすぎません。 つまり、要素のスタイルを制御するレンダープロップなどにアクセスすることはできません。 ただし、レンダリング時に呼び出されるコールバック（例：eventRenderメソッド）を介して、DOM要素に直接アクセスできます。 これが基本的なデモサンドボックスです。 次に、フルカレンダーコンポーネント（ボタンなど）を他のアプリケーションと同じルックアンドフィールにしたいと思います。 これを行う1つの方法は、使用しているクラス名を確認し、それに応じてスタイルを実装することにより、すべてのスタイルを手動でオーバーライドできることです。 または、ドキュメントで提案されているように、Bootstrapテーマを実装することもできます。 しかし、これらのソリューションのいずれかの問題は、次のとおりです。 大変な作業になるでしょう MUIテーマに変更を加えて、カレンダーのテーマを更新するのを忘れた場合、それらが異なるように見えるため、同期の問題が発生します。 私がしたいのは次のいずれかです： MUIテーマを魔法のようにBootstrapテーマに変換します。 または、次のようなMUIクラス名とカレンダークラス名の間のマッピングを作成します。 .fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained .fc-button-primary= .MuiButton-containedPrimary セレクターなどをマッサージして機能させる必要はありません（たとえば、MUIボタンには2つの内部スパンがありますが、フルカレンダーには1つしかない）。ほとんどの場合、テーマを変更します。2か所で変更する必要はありません。 @extend構文でSassのようなものを使用することは、私が考えていることです。Sassを使用してフルカレンダーCSSを簡単に作成できましたが、SassはどのようにしてMuiThemeにアクセスできますか？ おそらく私は反対のアプローチを取ることができます-MUIに「ここのこれらのクラス名はこれらのMUIクラスのようにスタイル設定する必要があります」と伝えます。 これをどのように解決するかについて具体的な提案はありますか？

9 css  reactjs  fullcalendar  jss