Как реализовать функционал в Next.js, чтобы данные отображались на странице только после нажатия на кнопку?

Question

Амадеус

javascript , nextjs

Как реализовать функционал в Next.js, чтобы данные отображались на странице только после нажатия на кнопку?

Как можно переписать код с помощью `useState` так, чтобы данные выводились только после нажатия кнопки, вместо автоматического запроса при открытии страницы? Я бы хотел узнать, как правильно использовать `useState` для этой задачи, так как ChatGPT советует такой подход, и я хочу убедиться, что понимаю его правильно.

28 мая 2024 г. 14:21

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации функционала, чтобы данные отображались на странице только после нажатия на кнопку в Next.js, можно использовать хук useState для управления состоянием компонента.

Пример кода, который можно переписать с использованием useState:

```jsx
import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);

  const fetchData = () => {
    // Ваша функция для загрузки данных
    setData(/* Ваши данные */);
  };

  return (
    <div>
      <button onClick={fetchData}>Загрузить данные</button>
      {data && <p>{data}</p>}
    </div>
  );
};

export default MyComponent;
```

В этом примере мы создаем состояние `data` с помощью хука `useState` и инициализируем его значением `null`. При нажатии на кнопку "Загрузить данные" вызывается функция `fetchData`, которая загружает данные и обновляет состояние `data` с помощью метода `setData`. Затем данные отображаются на странице только после успешной загрузки через условный оператор `{data && <p>{data}</p>}`.

Надеюсь, это поможет вам понять, как правильно использовать `useState` для отображения данных на странице только после нажатия на кнопку в Next.js.

Answer 2

Если по действию пользователя, то это на клиенте и да, нужно использовать useState.