Formik没有维护传递到initialVals中的对象的键顺序

Question

我正在尝试重新排序这个对象，以便对一些字段进行排序。它可以在没有封装在formik组件中的表上工作。使用formik，它首先进行排序，但随后似乎会进行某种缓存，不会再刷新顺序。我不能将结构更改为数组。它必须是一个对象。我唯一想做的另一件事就是给对象添加一些随机值，但这不会通过代码审查。当这个对象通过formik时，我还能做些什么来让它排序呢？

  console.log('before', variationsByKey);
  return (
    <Formik
      enableReinitialize={true}
      initialValues={variationsByKey}
      {({
        values,
      }) => {
        console.log('after', values);

排序几次，然后保留对象的内存。before是正确的排序方式，而after永远不会改变。

before {new_variation: {…}, on: {…}, off: {…}}

after {new_variation: {…}, off: {…}, on: {…}}

代码沙箱供参考：https://codesandbox.io/s/sweet-brattain-29z53?file=/src/App.js

Answer 1

Formik对initialValues做出反应。如果在表单呈现后的任何时候，您想要更改初始值对象并让Formik重新绘制自身(这在enableReinitialize中是允许的)，您基本上需要添加一个侦听器(useEffect([..])，在其中您将变量设置为一个新对象。我假设您的初始值变量是variationByKey。

useEffect(() => {
   setVariationsByKey(newObject);
}, [anyDependencyYouHave]);

如果您需要排序或进行任何其他更改，请创建一个全新的对象，并使用设置器setVariationsByKey(newObject)将其设置为您的变量，该设置器监视您拥有的任何依赖项。