单击时如何使用初始useState值

Question

我正在使用react钩子，加载页面时，我设置了一些与某种排序相关的默认值/初始值，看起来像这样：

 const [sortingOptions, setSortingOptions] = useState({
    name: 'productName',
    direction: 'ASC',
  });

比方说，使用了app，当然这个值已经改变了，让我说我想在单击时再次达到这个值。例如：

const resetSorts => {
   // could I call something here to setSortingOptions again to productName and asc ? 
};

首先，我考虑创建新变量，例如：

 const initialSortState = {
    name: 'productName',
    direction: 'ASC',
  };

并进行如下设置：

setSortingOptions(initialSortState );

但是我不确定这是否正确，是否还有另一种方法可以使点击时返回INITIAL / DEFAULT状态值？

谢谢大家 干杯

Answer 1

为了将其设置为默认值，您需要将默认值存储在某个变量中。因此，您的方法是正确的，而且可读性强。通过查看文档，如果您有一个更复杂的组件，可以provide a function返回默认值，但是对于您的用例，我想说的只是使用一个常量。

Answer 2

不幸的是，没有内置功能可以恢复到初始状态。

您的方法似乎很好。我们还可以做的就是为这种情况准备适当的功能。

function resetSorts() {
  setSortingOptions({
    name: 'productName',
    direction: 'ASC',
  });
};

以后您可以在任何需要的地方调用它：

resetSorts();

或者如果您愿意点击以下按钮：

<Button onClick={resetSorts} />

Answer 3

这很简单。您可以调用函数onClick。

const resetSorts = () => {
  setSortingOptions({
    name: 'productName',
    direction: 'ASC',
    });
}

现在，您可以调用此功能onClick以返回到所需的初始状态。

<button onClick={resetSorts}>Get to initial state</button>