如何將 useState 與 object 一起使用？

Question

如何將 useState 與 object 一起使用？ 這與其他類似的問題不同。 我下面的代碼給出了奇怪的錯誤......

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data}</h1>
    );
}

https://codesandbox.io/s/usestate-with-an-object-m176t?file=/src/App.js:0-167

Answer 1

您的問題不在於useState 。
當您嘗試渲染{data}時會出現問題，因為它是 object。 你需要渲染一個屬性。

在這種情況下，您的數據 object 是：

{
  data: 'something'
}

要呈現該值，您應該：

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data.data}</h1>
    );
}

Answer 2

您不能在 React 中將對象作為子項傳遞。

請注意，您傳遞的是 object <h1>Data: {data}</h1> ，數據是具有 data 屬性的 object

解決方案

import React, { useState } from "react";

export default function App() {
    const [data, setData] = useState({data: 'something'});

    return (
         <h1>Data: {data.data}</h1>
    );
}