React Hooks - установить начальное состояние

Question

Я использую React useState для создания объекта в состоянии. После успешного вызова API он обновляется до объекта данных.

У меня есть форма, которая может изменить это состояние, но у меня также есть кнопка отмены. Как я могу восстановить это состояние до его начальных значений (после вызова API), когда нажата кнопка «Отмена»? 1006 *

Answer 1

const initialState = {
    id: '',
    title: '',
};

const Test = () => {
    const [position, setPosition] = useState(initialState);

    return <>
        ...form
        <button onClick={setPosition(initialState)}>Reset</button>
    </>;
};

Answer 2

Не создавайте другую переменную состояния только для сохранения начального состояния, так как это вызовет другой повторный рендеринг вместо этого, когда ваш компонент смонтирован, а затем инициализируйте свой объект начального состояния:

let initialState = null;

React.useEffect(() => {
  initialState = position;
},[])

Если вы хотите выполнить сброс до начальное состояние просто используйте:

setPosition(initialState);

Answer 3

Ответ на ваш вопрос, если вы должны сохранить начальное значение: «Да».

Это был бы самый простой способ поддерживать ваш код. Поэтому поместите свое начальное значение в константу:

const INITIAL_VALUES = {
  id: '',
  title: '',
  description: '',
  authoredBy: '',
  createdDate: '',
  lastUpdatedBy: '',
  lastUpdateDate: '',
  sliderResponses: [],
  tileResponses: [{}],
  template: {}
}

Чем каждый раз, когда вы хотите использовать этот исходный объект, просто распространяйте его, и все будет хорошо (распространите, чтобы потерять ссылку на константу):

const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState({...INITIAL_VALUES});

И позже при сбросе:

setPosition({...INITIAL_VALUES})

Answer 4

Вам не нужно создавать другое Состояние . Просто объявите начальное состояние, которое не будет изменено, и назначьте его состоянию Position , когда его необходимо сбросить. Пример:

import React,{useState} from 'react'

const YourComponent = () =>{
 const initialState = {
    id: '',
    title: '',
    description: '',
    authoredBy: '',
    createdDate: '',
    lastUpdatedBy: '',
    lastUpdateDate: '',
    sliderResponses: [],
    tileResponses: [{}],
    template: {}
  }
 const [basePosition, setBasePosition] = useState({});
  const [position, setPosition] = useState(initialState);
  const resetState = () =>{
     setPosition(initialState)
   }
}