Console.log сначала показывает объект, а затем при щелчке показывает массив из одного объекта.

Я вызываю наблюдаемое в моем компоненте React с помощью MobX. Когда я записываю в консоль этот наблюдаемый объект, консоль сначала показывает значение как объект, а затем, когда я нажимаю на него, оно преобразуется в массив для этого одного объекта. Позвольте мне показать это с изображениями:

Сначала вот так:

Затем в виде массива при щелчке:

Если я щелкну еще раз, чтобы закрыть его, он снова станет объектом.

Это как кот Шредингера.

Моя наблюдаемая определяется как:

@observable anecdote: IAnecdote | undefined = undefined

Мое действие, которое дополняет наблюдаемый анекдот, выглядит следующим образом:

    @action loadAnecdote = async (slug: string) => {
        this.loadingInitial = true
        try {
            const anecdote = await agent.Anecdotes.selected(slug)
            runInAction(() => {
                this.anecdote = anecdote
                this.loadingInitial = false
            })
            return anecdote
        } catch (error) {
            console.log(error)
        }
    }

Я заметил, что если я определю возвращаемый тип await agent.Anecdotes.selected(slug) как Promise<IAnecdote>, то результат также станет противоречивым. В противном случае, если его тип any, я могу использовать результат как массив из одного объекта, как показано в коде result[0] ниже.

Из-за этой непоследовательности я не могу использовать наблюдаемый анекдот. Вместо этого я возвращаю прямой результат выборки. И, как видно из компонента ниже, я назначаю этот результат реф. Это единственный способ заставить этот код работать.

interface DetailParams {
    slug: string
}

const AnecdoteDetails: React.FC<RouteComponentProps<DetailParams>> = ({match}) => {
    const rootStore = useContext(RootStoreContext)
    const { loadAnecdote, anecdote, loadingInitial } = rootStore.anecdoteStore
    const [loading, setLoading] = useState(false)
    const ref = useRef(anecdote)

    useEffect(() => {
        loadAnecdote(match.params.slug)
            .then(result => ref.current = result[0])
            .then(() => {
                setLoading(true); 
                document.title = parse(ref.current!.title.rendered).toString()
            })
        
    }, [loadAnecdote, match.params.slug, setLoading])

    if(loadingInitial || !loading) return <LoadingComponent content='Anecdote loading...' />

    return (
        <Fragment>
            {loading &&
                <Fragment>
                    <AnecdoteListItem anecdote={ref.current!} />
                    <AnecdoteComment anecdoteId={ref.current!.id} />
                </Fragment>
            }
        </Fragment>
    )
}

export default observer(AnecdoteDetails)

Что я могу сделать, чтобы устранить это несоответствие и напрямую использовать наблюдаемый анекдот вместо ref.current внутри компонента?