Reactフックを理解しようとしています。私が欲しいのは、useEffectフックを使用してreduxアクションを呼び出すことにより、関数型コンポーネント内のデータをフェッチすることです。私は小道具を次のような状態に渡すことができることを知っています
const [todoList] = useState(props.todoList)
しかし、既存のreduxアクションによってデータをフェッチするためのベストプラクティスは何ですか？
Reactクラスコンポーネントでは、このメソッドを呼び出してcomponentDidMount（）でデータをフェッチし、everythinkが機能します。
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { ITodo } from './types'
import { getTodos } from '../actions/todoActions'
interface IProps {
todoList: Array<ITodo>
getTodos: typeof getTodos
}
const Todos = (props: IProps) => {
useEffect(() => {
props.getTodos()
}, [props.todoList])
return (
<div>
{props.todoList.map((_) => (<div key={_.Id}>{_.Name}</div>))}
</div>
)
}
const mapStateToProps = (state) => ({
todoList: state.todo.todoList
})
const mapDispatchToProps = {
getTodos
}
export default connect(mapStateToProps, mapDispatchToProps)(ProdRoute)
propsを使用してtodoのリストを取得することを期待していました。props.getTodos（）は、componentDidMount（）メソッドのように一度呼び出す必要があります。しかし実際にはデータを取得し、getTodos（）は何度も呼び出されますが、コンポーネントのマウント時に1回呼び出す必要があります
に渡す[props.todoList]と、useEffect次の理由で誤って一定の更新を強制していることに注意してください。
useEffectインスタンス比較（===）を実行して、props.todoList変更されたかどうかを確認しますprops.getTodos()ディスパッチャが呼び出されますprops.todoListに更新されるコンポーネントが再レンダリングされますuseEffect呼び出しが届きます[props.todoList]、それが再実行するかしないかを必要とするかどうかを確認するための値として、props.todoList変更され（空で、現在props.getTodos()は価値があります）、そのように呼ばれますtodoListは同じ値でを更新しますが、配列参照を変更しますuseEffect、[props.todoList]パラメータが更新されているかどうかが確認されます...ただし、内容が同じであっても、前のものprops.todoListが実際のものと異なるため、更新されています。props.todoListだから、あなたがprops.getTodos()一度だけ電話する必要がある場合は
[props.todoList.length]代わりに使用[props.todoList]useEffect[]2番目のパラメーターとして空の配列を使用しuseEffectます（ドキュメントを参照）この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加