對象作為 React 子項無效 -> 構建時錯誤 -> next.js typescript

Question

在構建時錯誤中從 function 返回 object... 當我構建我的應用程序時（npm 運行構建）。 告訴我這個錯誤

-> 對象作為 React 子項無效（找到：object，鍵為 {name, age}）。 如果您打算渲染子集合，請改用數組。

那是我的代碼

const obj = {
    name:"A",
    age:20
}
function ObjFileReturn():[obj:{name:string,age:number}] {
  return [obj];
}
export default ObjFileReturn;

問題是 -> 如何使用 ts 從 function 返回 obj

請幫助我並忽略我的寫作風格。

Answer 1

如果您嘗試將 object 作為組件返回，您需要首先將 object 字符串化或將其從 object 類型轉換。 對象不是有效的 JSX/React 元素。

你可以做：

type objType = {
  name: string
  age: number
}

const obj: objType = {
    name: "A",
    age: 20
}

function ObjFileReturn() {
  return <div>{JSON.stringify(obj, null, '\t'}</div>

export default ObjFileReturn;

JSON.stringify() 將 object 轉換為字符串，您可以在 div 中使用該字符串從函數組件返回。 strigify 中的額外參數漂亮地打印它，以便它保持格式化。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

希望有幫助！