在useEffect中调用Redux Action

Question

我的目标是在useEffect内调用一个动作。

const ShowTodos = (props) =>{
   useEffect(()=>{
    props.fetchTodos()
   },[])
} 
const mapStateToProps = (state)=>{
  return {
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  }
}

export default connect(mapStateToProps,{fetchTodos})(ShowTodos)

这个功能运行良好，但我收到了一个警告。

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps.

但是，如果我将props作为我的useEffect的第二个参数添加，那么它将无限运行。

在这里，我的第一个解决方法是使用useRef，但似乎它总是重新渲染，从而重新设置useRef，我认为这在优化方面不好。

const ref = useRef();
  ref.current = props;
  console.log(ref)


  useEffect(()=>{
  ref.current.fetchTodos()
  },[])

这里还有其他解决方法吗？

- ajbee

---

Dan Abramov在https://overreacted.io/a-complete-guide-to-useeffect/中对这个案例进行了深入的解释。值得一读。 - Hongbo Miao

Answer 1

这是一个 eslint 警告，如果 useEffect 中的任何依赖项不在依赖数组中，则会出现此警告。

在您的情况下，您在 useEffect 中使用了 props.fetchTodos，而 eslint 警告提示您将 props 作为依赖项提供，以便如果 props 更改，useEffect 函数从其闭包中获取更新后的 props。

但是，由于 fetchTodos 不会在应用程序生命周期中更改，并且您希望仅运行一次效果，因此您可以禁用规则以适应您的情况。

const ShowTodos = (props) =>{
   const { fetchTodos } = props
   useEffect(()=>{
     fetchTodos()
     // eslint-disable-next-line import/no-extraneous-dependencies
   },[])
} 
const mapStateToProps = (state)=>{
  return {
    todos:Object.values(state.todos),
    currentUserId:state.authenticate.userId
  }
}

export default connect(mapStateToProps,{fetchTodos})(ShowTodos)

但是您可以在不禁用规则的情况下解决这个问题，例如：

const ShowTodos = (props) =>{
   const { fetchTodos } = props
   useEffect(()=>{
     fetchTodos()
   },[fetchTodos])
} 

然而，我建议您知道何时应禁用该规则或将值传递给依赖项数组。

- Shubham Khatri

---

@jt25，嗯，是的，你必须知道什么时候做什么。你可以在这篇帖子和这篇帖子中阅读更多关于如何做出这个决策的内容。 - Shubham Khatri

@skyboyer 感谢反馈。是的，那是复制粘贴错误。 - Shubham Khatri

Answer 2

你需要将 fetchTodos 添加到依赖项中。

const ShowTodos = ({ fetchTodos }) => {
  useEffect(() => {
    fetchTodos();
  }, [fetchTodos])
  ...
}

或者像这样。

const ShowTodos = (props) => {
  const { fetchTodos } = props;

  useEffect(() => {
    fetchTodos();
  }, [fetchTodos])
  ...
}

- Andrej Jurkin

---

为什么我需要这样做？ - marcos souza

在依赖列表中包含fetchTodos会导致它被多次实例化，而作者可能并不需要这样。 - sagar