Question

我试图了解React Hooks。我想要的是使用useEffect挂钩通过调用redux动作在功能组件内部获取数据。我知道我可以将道具传递给

 const [todoList] = useState(props.todoList)

但是通过现有的redux操作获取数据的最佳实践是什么？

在React类组件中，我调用此方法以在componentDidMount（）中获取数据，并且一切都可以正常工作。

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)

我希望获得带有道具和道具的待办事项清单。getTodos（）应该像componentDidMount（）方法一样被调用一次。但是实际上我得到的数据和getTodos（）一遍又一遍地被调用，但是应该在组件安装时被调用一次

Answer 1

请注意，如果将[props.todoList]传递给useEffect，则会错误地强制进行持续刷新，因为：

useEffect进行实例比较（===）以了解props.todoList是否已更改
在第一个渲染之后，调用props.getTodos()调度程序
将更新props.todoList时，组件将重新呈现
useEffect调用将收到[props.todoList]作为值，以检查是否需要重新运行
props.todoList被更改（它是空的，现在已经变价了），props.getTodos()如此称呼
redux使用相同的值更新todoList，但改变了数组引用
重新渲染该组件，useEffect将检查[props.todoList]参数是否已更新...但是它已被更新，因为先前的props.todoList与实际的不同。 props.todoList，即使内容相同

因此，如果您只需拨打一次props.getTodos()，就可以

使用[props.todoList.length]代替[props.todoList]作为useEffect调用的第二个参数
使用空数组[]作为useEffect调用的第二个参数（请参见the docs）

如何通过带有钩子的现有redux动作获取数据？

1 个答案: