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

回答您是否应该存储初始值的问题是。

那将是维护代码的最简单方法。因此，将您的初始值输入一个常量：

//@FormUrlEncoded // Don't used
@POST("orders")
fun saveOrders(@Body orders: Orders): Call<OrdersResponse>

比每次您要使用该初始对象时，只需将其散布就可以了，一切都很好（散布以丢失对常量的引用）：

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

然后在您重置时：

const [basePosition, setBasePosition] = useState({});
const [position, setPosition] = useState({...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-将状态设置为初始状态

5 个答案: