reactjs - 在 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.

但是，如果我要在 useEffects 中添加 props 作为第二个参数，那么它将无限地运行。

我的第一个解决方法是使用 useRef 但它似乎总是会重新渲染，因此会再次重新设置 useRef，我认为这在优化方面并不好。

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


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

还有其他解决方法吗？

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])
} 

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