React Hooks - Как использовать сделать состояние зависимым от другого состояния?

Question

Я недавно начал использовать ловушки в реакции, и у меня часто возникает эта проблема: я создаю первое большое состояние, которое используется всеми моими компонентами, но некоторые меньшие части моего компонента разделяют это состояние и создают свое собственное состояние для Упрощение используйте кнопку Сброс.

Фильтры создают свои собственные состояния, чтобы отправлять новое состояние только при размытии, и при этом все еще управляться. Я думаю, я мог бы использовать ref здесь, но я использую этот пример, чтобы продемонстрировать простой случай состояния, зависящего от другого состояния (и, следовательно, от реквизита).

Как мне go о реализации этого в идиоматизме c Реагировать способом?

Answer 1

Вы можете использовать useEffect крючок. Первый аргумент - это функция, а второй - массив зависимостей. Когда зависимость меняет значение, функция выполняется снова.

import { useEffect } from 'react';

// ....code removed....

  useEffect(() => {
    setTempValue(value);
  }, [value]);

// ....code removed....

Песочница с изменениями: https://codesandbox.io/s/kind-bogdan-ljugv

Answer 2

В этом случае вам гораздо проще создать экземпляры детей с изменением key prop (так называемый метод "reset state" , основанный на том, как согласование работает в React):

const [resetKey, setResetKey] = useState(0);
const doReset = setResetKey(key => key + 1);

      <Filter
         key={`name-filter-${resetKey}`}
         ...
      />
      <Filter
         key={`code-filter-${resetKey}`}
         ...
      />
      <button onClick={doReset}>Reset!</button>

Это не только легче достичь. Это также будет работать так же для любых компонентов с состоянием, которые вы не можете изменить (по любой причине).

Answer 3

Как вы можете прочитать в документации (https://reactjs.org/docs/hooks-state.html#declaring -a-state-variable ), ваше состояние создается только при первом рендеринге и только тогда оно равно вашему начальному значению. Вы можете написать собственный хук useFilter и выставить свой фильтр-сброс:

const useFilter = (value, setFilters) => {
  const [tempValue, setTempValue] = useState(value);
  const resetFilter = () => setTempValue(value)

  return {
      resetFilter,
      getInputProps: () => ({
          onChange: e => setTempValue(e.target.value),
          onBlur: () => setFilters(tempValue),
          value: tempValue,
      })
  }

и вместо этого:

      <Filter
        value={filters.name}
        setFilters={value =>
          setFilters(filters => ({ ...filters, name: value }))
        }
      />

сделать это:

const setFilters = value => setFilters(filters => ({ ...filters, name: value }))
const { resetTempFilter, getInputProps } = useFilter(value, setFilters)
...
<input {...getInputProps()} />