在useEffect中调用Redux Action

问题描述 投票:2回答:2

我的目标是在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中添加useEffects作为我的第二个参数,那么它将无休止地运行。

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

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


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

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

reactjs redux react-hooks
2个回答
2
投票

这是一个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])
} 

但是,我建议您知道何时应该禁用规则或将值传递给依赖关系数组。


3
投票

您必须将fetchTodos添加到依赖项。

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

或者像这样。

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

  useEffect(() => {
    fetchTodos();
  }, [fetchTodos])
  ...
}
© www.soinside.com 2019 - 2024. All rights reserved.