reactjs - 使用钩子在 React 中引用 MongoDB ObjectID 会导致 TypeError: Cannot read property '$oid' of undefined

Question

当作为 useSelector React 钩子的一部分引用时，访问 MongoDB 返回的 ObjectID 字符串时，我似乎遇到了问题，但这在同一应用程序的其他地方不是问题。键名中的 $ 符号有问题吗？

我的 api 调用返回这个

{"_id": {"$oid": "5e121d3d52d781668fbc619c"}, "name": "Foo Document Name"}

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { setFoo } from '../../actions';

function FooInfo(props) {
 const foo = useSelector(state => state.foo);
 console.log('after useSelector', foo);
 const dispatch = useDispatch();

 useEffect(function() {
   console.log('useEffect', props.match);
   axios.get(`/api/foo/${props.match.params._id}`, {headers: {'content-type': 'application/json’}})
     .then(function(response) {
       dispatch(setFoo(response.data));
     })
     .catch(function(error) {
       console.log('error', error);
     });
 }, [dispatch, props]);

 return (
   <div>
     <h2>{foo.name}</h2>
     <small>id: {foo._id.$oid}</small>
     <hr/>
   </div>
 )
}

来自动作/index.js

…
export const SET_FOO = 'SET_FOO’;
export function setFoo(foo) {
 return {
   type: SET_FOO,
   foo: foo,
   _id: foo._id.$oid
 };
};

我知道这一行有效_id: foo._id.$oid，因为 useSelector 行之后的 console.log 显示：

after useSelector 
    • {_id: {…}, name: “Foo Document Name"}
        • _id:
            • $oid: "5e121d3d52d781668fbc619c"
            • __proto__: Object
        • name: "Foo Document Name"
        • __proto__: Object

并且动作对象持有：

action     
    • {type: "SET_FOO”, foo: {…}, _id: "5e121d3d52d781668fbc619c"}
        • type: "SET_FOO"
        • foo:
            • _id: {$oid: "5e121d3d52d781668fbc619c"}
            • name: "Foo Document Name"
            • __proto__: Object
        • _id: "5e121d3d52d781668fbc619c"
        • __proto__: Object

浏览器给出这个错误：

TypeError: Cannot read property '$oid' of undefined

如果我从 id: {foo._id.$oid} 中删除 .$oid 我会在浏览器中收到此错误：

Error: Objects are not valid as a React child (found: object with keys {$oid}). If you meant to render a collection of children, use an array instead.

foo._id 不能未定义，因为删除 .$oid 表明 foo._id 包含某些内容。

这对我来说似乎是反应钩子的问题，但我是新手，所以我不相信我的观点。我相信可能是这种情况，因为将 useSelector 行更改为： const [foo, tempID] = useSelector(state => [state.foo, state.foo._id.$oid]); 也给出了 TypeError。

标签： reactjsmongodbobjectid