如何通过修改后的 React 最终形式按键访问值

Question

当用户试图通过 modified 和 values length > 0.

关闭表单时，我正在确认

if (modified) {
    return (
      Object.keys(modified).filter(
        (modifiedItem) => modified[modifiedItem]  && values[modifiedItem]?.length > 0,
      ).length > 0
    )
  }

一切正常，直到有一个数组的值：当我尝试通过 values[answers.0.icon] 访问时，有未定义的 ，当然，它应该通过 values.answers[0].icon 访问，通过当 迭代修改后的 键时是否可以这样做？或者换一种方式应该得到赞赏。

先谢谢你。

以下值的屏幕截图：

修改键：

Answer 1

您可以在 if 语句中添加 undefined 和 null，以在过滤之前检查它是否为 true 且不是 undefined 且不为 null 否则它将为 null 或者您可以添加其他内容。

if (modified && modified !== undefined && modified !== null) {
 return (
  Object.keys(modified).filter(
    (modifiedItem) => modified[modifiedItem]  && values[modifiedItem]?.length > 0,
  ).length > 0
 )   
} 
else {
 null
}

Answer 2

我建议包含 lodash 并使用 get 函数。这将为您解析“路径”。

例如_.get(values, modifiedItem).

可以在 https://lodash.com/docs/4.17.15#get

找到更多信息

Answer 3

你或许可以检查这种情况，如果它是一个数组并区别对待它。

我同意@Stijn 回答提供的解决方案，但是如果你不想携带不必要的 Lodash 行李，你可以使用下面的代码。

const parseDeep = (obj, path, def) => (() => typeof path === 'string' ? 
  path.replace(/\[(\d+)]/g,'.') : path.join('.'))()
  .split('.')
  .filter(Boolean)
  .every(step => ((obj = obj[step]) !== undefined)) ? obj : def

if (modified) {
return (
  Object.keys(modified).filter(
    (modifiedItem) => 
      Array.isArray(modifiedItem) ?
      modified[modifiedItem] && parseDeep(values, modifiedItem, false) : //modify as required
      modified[modifiedItem]  && values[modifiedItem]?.length > 0,
  ).length > 0
)
}

如何通过修改后的 React 最终形式按键访问值

How to access values by key from modified React final form

reactjs

redux-form

react-final-form