反应最终形式拆分字段值

Question

我有一个带有 React 最终形式的 React 和 Redux 应用程序，其中我有一个名为 'cars' 的字段，它是一个 select 并且如果数据是脏的，则间谍会触发一个提交事件。值和东西都很好，但我需要将其拆分为类型，因此形式 returns 类似于 coupe: ['BMW'], sedan: ['Audi'] 而不仅仅是具有值的字段名称，例如 cars: ['BMW', 'Audi']

{
  type: "Coupe"
  value: "BMW"   
},
{
  type: "Sedan"
  value: "Audi"   
}

也许有人建议如何改变它以及何时在内部反应最终形式？还是应该在 reducer 或 saga 中完成？

Answer 1

假设您的表单数据为

[
    {
        type: "Coupe",
        value: "BMW"
    }, {
        type: "Sedan",
        value: "Audi"
    }
]

并且需要将type值转成键名，所以得到

[{ coupe: 'BMW'}, {sedan: 'Audi'}]

您可以使用 Array.prototype.map()（在您的提交处理程序或 reducer 中，或任何更适合您的地方）：

const formData = [{type:"Coupe",value:"BMW"},{type:"Sedan",value:"Audi"}],

      remappedData = formData.map(({type,value}) => 
        ({[type.toLowerCase()]: value}))
      
console.log(remappedData)

.as-console-wrapper{min-height:100%;}

反应最终形式拆分字段值

React final form split field values

javascript

reactjs

react-final-form