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中添加useEffects作为第二个参数，则它将无限运行。

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

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


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

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

Answer 1

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

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

或这样。

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

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

Answer 2

这是eslint警告，如果useEffect中的任何依赖项都不是依赖项数组的一部分，则会得到警告。

在您的情况下，您在useEffect内使用props.fetchTodos，并且eslint警告提示您提供props作为依赖项，以便在道具更改时，useEffect函数将从其关闭处获取更新的道具。 / p>

但是，由于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])
}

但是我建议您知道什么时候应该确切地禁用规则或将值传递给依赖项数组。

在useEffect中调用Redux Action

2 个答案: