Frontender Libs - обзор библиотек JS / CSS

Объединение объектов с useSetState в React

useSetState — это хук, который позволяет объединять объекты в их текущем состоянии, аналогично this.setState в классовом компоненте.

Пример использования:

import { useSetState } from 'react-use';

const Demo = () => {
  const [state, setState] = useSetState({});

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => setState({ hello: 'world' })}>hello</button>
      <button onClick={() => setState({ foo: 'bar' })}>foo</button>
      <button 
        onClick={() => {
          setState((prevState) => ({
            count: (prevState.count || 0) + 1,
          }));
        }}
      >
        count
      </button>
    </div>
  );
};

В этом примере, кнопка "hello" обновляет состояние, добавляя hello: 'world'. Кнопка "foo" обновляет состояние, добавляя foo: 'bar'. Кнопка "count" увеличивает значение счетчика count на 1. Этот подход помогает управлять состояниями, объединяя их в один объект.

👉 @sWebDev

👍4👎1🤔1

www.tg-me.com/us/Frontender Libs обзор библиотек JS CSS/com.sWebDev/3043

1.62K viewsJul 29, 2024 at 07:43

Объединение объектов с useSetState в React

useSetState — это хук, который позволяет объединять объекты в их текущем состоянии, аналогично this.setState в классовом компоненте.

Пример использования:

import { useSetState } from 'react-use';

const Demo = () => {
  const [state, setState] = useSetState({});

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={() => setState({ hello: 'world' })}>hello</button>
      <button onClick={() => setState({ foo: 'bar' })}>foo</button>
      <button 
        onClick={() => {
          setState((prevState) => ({
            count: (prevState.count || 0) + 1,
          }));
        }}
      >
        count
      </button>
    </div>
  );
};

BY Frontender Libs - обзор библиотек JS / CSS