Новое в React Hook, почему состояние не определено после однократного использования?

Question

У меня есть вопрос относительно того, как объявлено состояние в реагирующем хуке.

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

 const { date } = state;

против

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

при вызове даты изнутри return, скажем,

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

console.log возвращает текущую дату, затем неопределенную для начального объявления В то время как последнее, государство сохраняется.

Разве эти заявления не одинаковы? Почему исходное состояние сохраняется только один раз?

Answer 1

Мне не совсем понятен вопрос, который вы задали, поскольку это довольно неожиданное поведение. Я добавил код здесь .

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'));

Вы можете проверить свой код с этим. Я добавил один и тот же компонент два раза, чтобы объяснить, что между каждым компонентом нет связи.

Answer 2

В операторе const [ date, setDate ] = useState(new Date()); дата = текущая дата, поэтому вы можете получить к нему доступ как {date}

В операторе const [ state, setState ] = useState({ date: new Date(), }) состояние - это объект с парами ключ-значение в качестве даты и нового Date () соответственно. Следовательно, вам нужно использовать {state.date} для доступа к дате.

Пожалуйста, примите это как ответ, если вам это поможет.