javascript - react Hook : fetch data inside useEffect warning

Question

我正在使用 React Hooks useEffect 从我的组件中的 API 获取数据

props.getUserInfoAction() is an Action from redux dispatching user info 

示例

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

效果很好，我可以获取我的数据，但我发现我的控制台中显示了一个警告。

React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when any prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

我试图在数组中传递 props 但这样做我得到了 API 调用的无限循环。

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

Answer 1

如果 props.getUserInfoAction() 是您应该执行的操作，而不是已经通过调度接收(我假设来自 connect)，请执行以下操作:

import {getuserInfoAction} from './actionCreators'
import {useDispatch} from 'react-redux'

const Comp = () =>{
    const dispatch = useDispatch()

    useEffect(() =>{
        dispatch(getUserInfoAction())
    },[dispatch])
}

因为即使你这样做:

const {action} = props

函数总是会在渲染调用之间发生变化。