私は新しいReact HooksのuseEffectAPIを試してみましたが、無限ループで永久に実行し続けているようです！コールバックをuseEffect1回だけ実行したい。これが参照用の私のコードです：
「Run code snippet」をクリックして、「Run useEffect」文字列がコンソールに無限に出力されることを確認します。
function Counter() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('Run useEffect');
setCount(100);
});
return (
<div>
<p>Count: {count}</p>
</div>
);
}
ReactDOM.render(<Counter />, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>これuseEffectは、レンダリングのたびにトリガーされるために発生します。これは、Counter()ステートレス機能コンポーネントのこの場合の関数の呼び出しです。あなたがやるときsetXから返されたコールuseStateでuseEffect、再びそのコンポーネントをレンダリングします反応し、useEffect再び実行を。これにより、無限ループが発生します。
Counter()→ useEffect()→ setCount()→ Counter()→ useEffect()→...（ループ）
あなたの作るためにuseEffect一度だけ実行し、空の配列を渡す[]以下の改訂スニペットに見られるように、2番目の引数として。
2番目の引数の目的は、配列引数の値のいずれかが変更されたときにReactに通知することです。
useEffect(() => {
setCount(100);
}, [count]); // Only re-run the effect if count changes
配列には任意の数の値を渡すことができuseEffect、値のいずれかが変更されたときにのみ実行されます。空の配列を渡すことで、変更を追跡せず、1回だけ実行して、効果的にシミュレーションするようにReactに指示していますcomponentDidMount。
function Counter() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('Run useEffect');
setCount(100);
}, []);
return (
<div>
<p>Count: {count}</p>
</div>
);
}
ReactDOM.render(<Counter />, document.querySelector('#app'));<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>useEffectの詳細をご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加