Ссылка на объектные идентификаторы MongoDB в React с помощью перехватчиков вызывает TypeError: Невозможно прочитать свойство '$ oid' из неопределенного - PullRequest
Новая
       34

Ссылка на объектные идентификаторы MongoDB в React с помощью перехватчиков вызывает TypeError: Невозможно прочитать свойство '$ oid' из неопределенного

0 голосов
/ 04 марта 2020

У меня, похоже, есть проблема с доступом к строке ObjectID, возвращаемой MongoDB, когда она упоминается как часть ловушки React useSelector, но это не проблема в другом месте того же приложения. Есть ли проблема с символом $ в имени ключа?

мой вызов 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>
 )
}

из действий / индекса. 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, потому что console.log после строки useSelector показывает: 

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

Если я удаляю. $ oid из id: {foo._id. $ 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.

...