对象作为React子对象无效(找到:键为｛_id，date，createdAt，updatedAt，__v｝的对象)

Question

当我尝试渲染来自数据库的对象(｛day｝请参阅下面的react Component(时，我得到了以下错误：

错误：对象作为React子对象无效(已找到：带键的对象｛_id，date，createdAt，updatedAt，__v｝(。如果您打算渲染子集合，请改用数组。

有问题的对象看起来像这样：

{
"_id": "5fdf554b88f52f520c93a16e",
"date": "2020-12-20T10:00:00.133Z",
"createdAt": "2020-12-20T13:44:43.934Z",
"updatedAt": "2020-12-20T13:44:43.934Z",
"__v": 0
}

下面是我的代码：

路由器：

dayRouter.get(
'/:id',
expressAsyncHandler(async (req, res) => {
const day = await Day.findOne({ _id: req.params.id })
if (day) {
res.send(day);
} else {
res.status(404).send('Booking Not Found.');
}
})
);
export default dayRouter;

Redux操作：

export const detailsDate = (dayId) => async (dispatch) => {
try {
dispatch({ type: DATE_DETAILS_REQUEST, payload: dayId });
const { data } = await Axios.get(`/api/day/${dayId}`);
dispatch({ type: DATE_DETAILS_SUCCESS, payload: data });
} catch (error) {
dispatch({
type: DATE_DETAILS_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};

Redux还原剂：

export function dateDetailsReducer(
state = {loading: true}, action) {
switch (action.type) {
case DATE_DETAILS_REQUEST:
return { loading: true };
case DATE_DETAILS_SUCCESS:
return { loading: false, day: action.payload };
case DATE_DETAILS_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
}

React组件：

import { useDispatch, useSelector } from 'react-redux';
import { detailsDate } from '../actions/dateAction';
function BookingConfirmationScreen(props) {  
const dayId = props.match.params.id;
const dateDetails = useSelector((state) => state.dateDetails); //from Redux Store
const { day } = dateDetails;
const dispatch = useDispatch();
useEffect(() => {
dispatch(detailsDate(dayId));
return () => {};
}, [day,dispatch, dayId]);
return (
<h1> Booking {day}</h1>
)
}
export default BookingConfirmationScreen;

我需要呈现的实际上是{day.date}，但我得到的日期实际上是未定义的。就在那时，我意识到有问题

Answer 1

day未定义，因为您从服务器获取数据，因此呈现组件比异步调用更快。这就是为什么在reducer中加载，当从服务器接收数据时，它被设置为false。从以下状态破坏加载：

const { day, loading } = dateDetails;
.
.
.

然后在返回时执行此操作：

if(loading)
return <div> loading.. </div>
return (
<h1> Booking {day.date}</h1>
)