如何将 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>
    );
}