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: {}
  });```

- Paul

---

这个回答解决了你的问题吗？使用React Hooks将状态重置为初始状态。 - Bilal Akbar

Answer 1

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

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

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

- Nikita Madeev

---

谢谢，顺便问一下，为什么initialState必须在组件外部定义？ - Paul

@Paul 这并非必须，但在这种情况下，由于数据是静态的，最好将其放在组件外部。否则，每次渲染都会创建一个新的对象initialState（但在这种情况下再次重复，您不会注意到性能问题 :)）。 - Nikita Madeev

嗨，@Nikita Madeev，但是当GET请求成功并获取帖子数据时，initialState将会更新。然后它将使用该数据填充initialState对象... - Paul

Answer 2

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;

- amine jisung

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

- Mario Petrovic

Answer 4

不要创建另一个状态变量来存储初始状态，因为这会导致组件挂载时再次重新渲染。相反，在组件挂载时初始化您的初始状态对象：

let initialState = null;

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

当您想要重置为初始状态时，请使用：

setPosition(initialState);

- Zayn

Answer 5

你不需要创建另一个State。只需声明一个初始状态，该状态不会更改，并在需要重置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)
   }
}

- Arnab