React Hooks-将状态设置为初始状态

Question

我正在使用React-useState创建状态为的对象。在成功调用API后，将更新为数据对象。

我有一个表单可以更改此状态，但我还有一个取消按钮。单击“取消”时，如何将此状态恢复为其初始值（API调用后）？

我应该创建另一个状态变量和存储初始状态在那里，然后更新我的状态基于？

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

Answer 1

您不需要创建另一个状态。只需声明一个不会改变的初始状态，并在需要重置时将其分配给位置状态。EX：

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)
   }
}

Answer 2

不要创建另一个状态变量只是为了存储初始状态，因为它会导致另一个重新渲染，而不是当你的组件被安装时，然后初始化你的初始状态对象：

let initialState = null;

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

如果要重置为初始状态，只需使用：

setPosition(initialState);

Answer 3

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

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

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