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

フックは、開発者がクラスを作成せずに状態やその他のReact機能を使用できるようにする新機能です。

13
useEffectの無限ループ
React 16.7-alphaの新しいフックシステムで遊んでいて、処理している状態がオブジェクトまたは配列の場合、useEffectで無限ループに陥ります。 まず、useStateを使用して、次のような空のオブジェクトで開始します。 const [obj, setObj] = useState({}); 次に、useEffectで、setObjを使用して空のオブジェクトに再度設定します。2番目の引数として、オブジェクトのコンテンツが変更されていない場合に更新されないことを期待して、[obj]を渡します。しかし、それは更新し続けます。内容に関係なく、これらは常に異なるオブジェクトであるため、Reactは変化し続けると考えていますか？ useEffect(() => { setIngredients({}); }, [ingredients]); 配列についても同じことが言えますが、プリミティブとしては、予想どおりループに陥ることはありません。 これらの新しいフックを使用して、コンテンツが変更されたかどうかを天気をチェックするときに、オブジェクトと配列をどのように処理する必要がありますか？
7
setInterval内でReact状態フックを使用すると状態が更新されない
私は新しいReactHooksを試していますが、毎秒増加するはずのカウンターを備えたClockコンポーネントがあります。ただし、値は1を超えて増加することはありません。 function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> コードスニペットを実行する結果を非表示スニペットを展開
5
React.useStateは小道具から状態をリロードしません
小道具の変更時に状態がリロードされることを期待していますが、これは機能せず、user変数は次のuseState呼び出しで更新されません。何が問題になっていますか？ function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } codepen
5
ReactuseEffectフックを最初のレンダリングで実行しないようにする
ドキュメントによると： componentDidUpdate()更新が発生した直後に呼び出されます。このメソッドは、最初のレンダリングでは呼び出されません。 新しいuseEffect()フックを使用してシミュレートできますが、最初でも、すべてのレンダリングの後に実行されcomponentDidUpdate()ているようuseEffect()です。最初のレンダリングで実行されないようにするにはどうすればよいですか？ 以下の例でわかるように、componentDidUpdateFunctionは最初のレンダリング中に印刷されますが、最初のレンダリング中には印刷されcomponentDidUpdateClassませんでした。 function ComponentDidUpdateFunction() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } class ComponentDidUpdateClass extends React.Component { constructor(props) { super(props); this.state = { count: …
5
コンポーネントのみのreactフックuseEffect（）クリーンアップWillUnmount？
私の問題を簡単に尋ねるために、このコードの結果を説明しましょう。 const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, [username]); const handleName = e => { const { value } = e.target; …
4
useStateフックセッターが誤って状態を上書きする
ここに問題があります：ボタンのクリックで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" }); }; …
3
React Hooksを使用したFirebaseリスナー
私は、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 …
3
未定義のプロパティ 'history'を読み取ることができません（React Router 5のuseHistoryフック）
数週間前にリリースされた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; …
5
React Hooks-useStateと単なる変数の使用
React HooksはuseStateオプションを提供し、私は常にHooksとClass-Stateの比較を見ます。しかし、フックといくつかの通常の変数はどうですか？ 例えば、 function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 私はフックを使用しませんでした、そしてそれは私と同じ結果をもたらすでしょう： function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } それで、違いは何ですか？その場合、フックの使用はさらに複雑になります...それで、なぜそれを使い始めるのですか？
1
依存関係を受け取るカスタムフックを作成する方法
いくつかの状態が変化したときにあまりにも角のあるカスタムフックを作成しています。 配列で任意の状態を渡すことができるはずです。 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 / …
1
TypeError：（0、_react.useEffect）は関数ではありません
開発環境では、私のアプリは問題なく動作します。本番環境では、次のエラーでクラッシュします。 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 …
3
useEffect-状態を更新するときに無限ループを防ぐ
ユーザーがToDoアイテムのリストを並べ替えられるようにしたい。ユーザーがドロップダウンリストから項目を選択すると、それが設定されますsortKeyの新しいバージョンを作成するであろうsetSortedTodos、とターントリガーでuseEffect、コールをsetSortedTodos。 以下の例は、私が望んでいるとおりに機能しますが、eslintは依存関係配列に追加todosするように求めています。そうするとuseEffect、無限ループが発生します（予想どおり）。 const [todos, setTodos] = useState([]); const [sortKey, setSortKey] = useState('title'); const setSortedTodos = useCallback((data) => { const cloned = data.slice(0); const sorted = cloned.sort((a, b) => { const v1 = a[sortKey].toLowerCase(); const v2 = b[sortKey].toLowerCase(); if (v1 < v2) { return -1; } if (v1 > v2) { …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.