Console.log 最初显示一个对象，然后在单击时显示一个对象的数组

如何解决Console.log 最初显示一个对象，然后在单击时显示一个对象的数组

我使用 MobX 在我的 React 组件中调用了一个 observable。当我控制台记录该 observable 时，控制台首先将该值显示为一个对象，然后当我单击它时，它会转换为该对象上的一个数组。让我用图片来展示它：

首先是这样的：

然后作为一个数组点击：

如果我再次点击关闭它，它又会变成对象。

这就像薛定谔的猫。

我的 observable 定义为：

@observable anecdote: IAnecdote | undefined = undefined

我填写轶事 observable 的动作是这样的：

    @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？

解决方法

这不是一个对象，而是一个包含单个元素 [ Object ] -> [ {...} ]

的数组