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

Question

我有一个组件，该组件使用useEffect中的useDispatch钩子将操作分派给reducer。我只希望它在第一个组件渲染上发生一次。然后，当我尝试使用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开发工具中检查结果时，它会正确显示。 外观如下：