React Hook的新手，为什么使用一次后状态未定义

Question

我有一个关于如何在react钩子中声明状态的问题。

const [ state, setState ] = useState({
date: new Date(),
})
const { date } = state;

与

const [ date, setDate ] = useState(new Date());

说，当返回中调用日期时

return (
<div>
{date}
</div>
)

console.log返回当前日期，然后对于初始声明未定义，而对于后者，状态保持不变。

这些声明不一样吗？为什么初始状态只持续一次？

Answer 1

在语句const [ date, setDate ] = useState(new Date());中date=当前日期，因此您可以将其作为｛date｝访问

在语句const [ state, setState ] = useState({ date: new Date(), })中state是一个键值对分别为date和new date((的对象。因此，您需要使用｛state.date｝才能访问日期。

请接受这个答案，如果这能帮你的话。

Answer 2

我不清楚你说的问题，因为这是一种意外的行为。我在这里添加了一些代码。

import React, {useState} from 'react';
import { render } from 'react-dom';
const WithStateObject = () => {
const [state] = useState({ date: new Date() });
return <div>{state.date.toString()}</div>;
}
const WithStateAttr = () => {
const [date] = useState(new Date());
return <div>{date.toString()}</div>;
}
const App = () => {
return <div>
<div>With State Object <WithStateObject /></div>
<div>With State attribute <WithStateAttr /></div>
<h2>Second Time</h2>
<div>With State Object <WithStateObject /></div>
<div>With State attribute <WithStateAttr /></div>
</div>;
}
render(<App />, document.getElementById('root'));

你可以用这个来检查你的代码。我已经添加了两次相同的组件，只是为了解释每个组件之间没有联系。