タグ付けされた質問 「react-hooks」

useEffectはフックがすべての変更で機能に渡され実行されます反応します。これは、必要なプロパティが変更された場合にのみ呼び出せるように最適化できます。 から初期化関数を呼び出し、componentDidMount変更時に再度呼び出さない場合はどうなりますか？エンティティをロードしたいとしますが、ロード関数はコンポーネントからのデータを必要としません。useEffectフックを使用してこれをどのように作成できますか？ class MyComponent extends React.PureComponent { componentDidMount() { loadDataOnlyOnce(); } render() { ... } } フックを使用すると、次のようになります。 function MyComponent() { useEffect(() => { loadDataOnlyOnce(); // this will fire on every change :( }, [...???]); return (...); }

205 javascript  reactjs  react-hooks 

React 16.8.6（以前のバージョン16.8.3では良かった）では、フェッチ要求で無限ループを回避しようとすると、このエラーが発生します ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps 私は無限ループを止める解決策を見つけることができませんでした。の使用を避けたいuseReducer()。私はこの議論を見つけましたhttps://github.com/facebook/react/issues/14920可能な解決策はYou can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.私がやっていることに自信がないので、まだ実装しようとはしていません。 私はこの現在のセットアップを持っていますReactフックuseEffectは継続的に永久に/無限ループを実行し、唯一のコメントはuseCallback()私がよく知らないものについてです。 私が現在どのように使用しているかuseEffect()（これはと同様に最初に一度だけ実行したいcomponentDidMount()） useEffect(() => { fetchBusinesses(); }, []); const fetchBusinesses = () => { …

178 reactjs  eslint  create-react-app  react-hooks 

Reactの公式ドキュメントではそれが言及しています- Reactクラスのライフサイクルメソッドに精通している場合は、useEffectフックを、componentDidMount、componentDidUpdate、およびcomponentWillUnmountを組み合わせたものと考えることができます。 私の質問は- componentWillMount()ライフサイクルメソッドをフックで使用するにはどうすればよいですか？

176 javascript  reactjs  jsx  react-hooks 

フックを習得しようとしていますが、そのuseState方法によって混乱しました。配列の形で状態に初期値を割り当てています。のsetメソッドはuseState、spread(...)またはを使用しても機能しませんwithout spread operator。状態に設定したいデータを呼び出してフェッチする別のPCでAPIを作成しました。 これが私のコードです： import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; const StateSelector = () => { const initialValue = [ { category: "", photo: "", description: "", id: 0, name: "", rating: 0 } ]; const [movies, setMovies] = useState(initialValue); useEffect(() => { (async …

167 javascript  reactjs  react-hooks 

たとえば、rate、sendAmount、およびreceiveAmountの3つの入力があるとします。その3つの入力をuseEffect diffing paramsに配置しました。ルールは次のとおりです。 sendAmountが変更された場合、計算します receiveAmount = sendAmount * rate receiveAmountが変更された場合、計算します sendAmount = receiveAmount / rate レートを変更した場合、私は計算しreceiveAmount = sendAmount * rateたときsendAmount > 0または私が計算しsendAmount = receiveAmount / rateたときにreceiveAmount > 0 これがcodesandbox https://codesandbox.io/s/pkl6vn7x6jです問題を実証するです。 比較する方法があるoldValuesとnewValues上の好きは、componentDidUpdate代わりに、このような場合のために3つのハンドラを作るのは？ ありがとう これがhttps://codesandbox.io/s/30n01w2r06の私の最終的な解決策ですusePrevious この場合、useEffect変更ごとに同じネットワーク呼び出しが発生するため、複数を使用することはできません。そのため、私もchangeCount変更の追跡に使用しています。これchangeCountはローカルからの変更のみを追跡するのにも役立ちます。サーバーからの変更による不要なネットワーク呼び出しを防ぐことができます。

149 reactjs  react-hooks 

私は簡単な問題のために反応フックを使用しようとしています const [personState,setPersonState] = useState({ DefinedObject }); 以下の依存関係があります。 "dependencies": { "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.0" } しかし、まだ次のエラーが発生します。 ./src/App.js 7行目： React Hook "useState"は、React関数コンポーネントでもカスタムReact Hook関数react-hooks / rules-of-hooksでもない関数 "app"で呼び出されます 39行目： 「状態」は定義されてい ません 各エラーの詳細については、キーワードを検索してください。 コンポーネントコードは次のとおりです。 import React, {useState} from 'react'; import './App.css'; import Person from './Person/Person'; const app = props => { const …

148 reactjs  react-hooks 

私は現在Reactでフックの概念を学び、以下の例を理解しようとしています。 import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 上記の例は、ハンドラー関数パラメーター自体のカウンターをインクリメントします。イベントハンドラー関数内のカウント値を変更したい場合 以下の例を検討してください setCount = () => …

133 javascript  reactjs  react-native  react-hooks 

useState配列のReactフック内に要素をプッシュする方法は？それは反応状態の古い方法としてですか？または何か新しいもの？ 例：setStateプッシュの例？

123 javascript  reactjs  react-hooks 

他の状態に依存している状態があるとしましょう（たとえば、Aが変更されたときにBを変更したい）。 Aを監視し、useEffectフック内にBを設定するフックを作成することは適切ですか？ ボタンをクリックすると、最初のエフェクトが起動してbが変化し、次のレンダリングの前に2番目のエフェクトが起動するように、エフェクトはカスケードされますか？このようなコードを構造化することのパフォーマンス上の欠点はありますか？ let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => { // do some stuff }, [b], ) return ( <button onClick={() => …

122 javascript  reactjs  react-hooks 

初めてReactフックを試しましたが、データを取得して2つの異なる状態変数（データと読み込みフラグ）を更新すると、両方の呼び出しがあったとしても、コンポーネント（データテーブル）が2回レンダリングされることに気付くまではすべて問題ないようでした状態アップデータへの変換は同じ機能で発生しています。これが私のコンポーネントに両方の変数を返す私のapi関数です。 const getData = url => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(async () => { const test = await api.get('/people') if(test.ok){ setLoading(false); setData(test.data.results); } }, []); return { data, loading }; }; 通常のクラスコンポーネントでは、複雑なオブジェクトになる可能性のある状態を更新するために1回の呼び出しを行いますが、「フック方法」は状態をより小さな単位に分割することであるように思われ、その副作用は複数回繰り返されるようです。個別に更新されるとレンダリングされます。これを軽減する方法はありますか？

120 javascript  reactjs  react-hooks 

に出くわしたとき、私はフックのドキュメントを調べていましたuseRef。 彼らの例を見て… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } …にuseRef置き換えることができるようcreateRefです。 function TextInputWithFocusButton() { const inputRef = createRef(); // what's …

119 javascript  reactjs  react-hooks 

以下のフックの例を検討する import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 基本的に、this.forceUpdate（）メソッドを使用して、以下の例のように、Reactクラスコンポーネントでコンポーネントをすぐに再レンダリングするように強制します。 class Test extends Component{ constructor(props){ super(props); this.state = { count:0, count2: 100 } this.setCount = …

116 javascript  reactjs  react-native  react-hooks 

私は以下のようなuseEffectの例を試していました： useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } catch (e) { console.error(e); } }, []); コードスニペットを実行する結果を非表示スニペットを展開 コンソールにこの警告が表示されます。しかし、私が考える非同期呼び出しでは、クリーンアップはオプションです。なぜこの警告が出るのかわかりません。サンドボックスをリンクして例を示します。https://codesandbox.io/s/24rj871r0p

115 javascript  reactjs  react-hooks 

適用するいくつかの副作用があり、それらを整理する方法を知りたいです： 単一のuseEffectとして またはいくつかのuseEffects パフォーマンスとアーキテクチャの点で何が優れていますか？

114 reactjs  react-hooks 

React with Hooksで、状態を更新する正しい方法は何ですか？ネストされたオブジェクトですか？ export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) （フィールドの追加）setExampleStateに更新exampleStateするには、どのように使用しaますか？ const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", fieldTwo: { …

114 javascript  reactjs  react-hooks