时间戳

首页 > 解决方案 > 呈现错误时，对象作为具有状态的 React 子项无效

javascript - 呈现错误时，对象作为具有状态的 React 子项无效

问题描述

在带有 React 的 Ionic 中，我收到此错误：

“对象作为 React 子级无效（找到：带有键 {...} 的对象）。如果您要渲染子级集合，请改用数组。”

函数 getTimes 应该返回一个带有键和值的 JSON 对象，例如。{tmp1: '1:05', tmp2: '2:05'} 但我在尝试渲染时遇到错误，尽管在 console.log 中我可以看到结果。

export const getTimes = (date: Date) => {
 const API_URL = '...'
    return axios({
      url: API_URL,
      method: 'get'
    }).then(response => {     
      return response.data.data.timings;
    })
}

而在我进行渲染的 tsx 文件中

const theTimes = () =>{
const [state, setState] = useState({ isLoading: true, collection: null });

useIonViewWillEnter(()=>{
    getTimes(new Date()).then(res=>{
        setState({ isLoading: false, collection: res });
    })
})

    console.log(state.collection);


return <IonCard>{state.collection}</IonCard>
}

标签： javascriptreactjsionic-framework

解决方案

正如错误所说，state.collection是一个对象（{tmp1: '1:05', tmp2: '2:05'}）。React 不知道如何处理这个问题，也不知道该怎么做，所以它抛出了一个错误。

这取决于您要渲染的内容，但您可能希望渲染每个单独的对象属性。

例如：

  return <IonCard>{state.collection.tmp1} {state.collection.tmp2}</IonCard>

推荐阅读