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

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

您不需要创建另一个状态。只需声明一个不会改变的初始状态，并在需要重置时将其分配给 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)
   }
}

Answer 4

你的问题是否应该存储初始值的答案是是。

这将是维护代码的最简单方法。所以把你的初始值放在一个常量中：

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 5


import React, { useState } from 'react'

// counter 

function Example3() {

    const [initial, setIncrement] = useState(0)


    const increment = () => {
        setIncrement(initial + 1)
    }
    const dincrement = () => {
        setIncrement(initial - 1)
    }


    const reset = () => {

        setIncrement(0)

    }




    return (


        <div>

            <p>{initial}</p>
            <button onClick={increment} >+</button>
            <button onClick={dincrement} >-</button>
            <button onClick={reset}>reset</button>

        </div>


    )




}


export default Example3;

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

React Hooks - set state to initial state

reactjs

react-hooks

use-state