从 useSelector react-redux 钩子获取未定义

Question

我有一个组件，它使用 useEffect 中的 useDispatch 钩子将动作分派到减速器。我只希望它在第一次组件渲染时发生一次。然后当我尝试使用 useSelector 钩子从商店设置结果时，我得到了未定义。这是我的代码：

const SingleHotel = props => {
  //GETTING HOTEL ID FROM REACT-ROUTER-DOM PROPS
  const {
    match: {
      params: { id }
    }
  } = props

  //INITIALIZE USE DISPATCH REDUX HOOK.
  const dispatch = useDispatch()

  //ACCESSING HOTEL DETAILS STATE FROM THE REDUX STORE.
  const hotelDetails = useSelector(state => state.SingleHotel)

  //DISPATCHING HOTEL DETAILS TO THE REDUCER.
  useEffect(() => {
    dispatch(fetchSingleHotel(id))
  }, [])

  return <div>Single hotel page {console.log(hotelDetails)}</div>
}

我是 JSX 商店中的控制台日志记录状态，但我得到“未定义”。但是，当我在 Redux 开发工具中检查结果时，它显示正确。这是它的外观：