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

Posted 2023-02-14

【中文标题】React Hooks - 将状态设置为初始状态

【英文标题】：React Hooks - set state to initial state

【发布时间】：2020-11-02 14:37:21

【问题描述】：

我正在使用 React useState 创建一个状态对象。 成功调用 API 后，它会更新为数据对象。

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

我应该创建另一个状态变量并在那里存储初始状态，然后根据它更新我的状态吗？

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

【问题讨论】：

这能回答你的问题吗？ Reset to Initial State with React Hooks

【参考方案1】：

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

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

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

【讨论】：

谢谢，出于兴趣，为什么 initialState 必须在组件之外？

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

您好@Nikita Madeev，但是一旦 GET 请求成功并获取发布数据，initialState 将更新。然后它将使用该数据填充该 initialState 对象....

【参考方案2】：

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

let initialState = null;

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

当您想重置为初始状态时，只需使用：

setPosition(initialState);

【参考方案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)
   

【参考方案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)

【参考方案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;