使用递归函数修剪字段无法按预期工作

Question

我试图在提交之前修剪表单的字段，但由于某些原因，这些值没有被更改。递归函数定义为：

const trimFields = form => _.forIn(form, element => isObject(element) ? trimFields(element) : trimText(element))

但这根本不起作用，它似乎只是保持了最初的价值。

我在这里做错了什么？

Fiddle

Answer 1

您的递归函数从未实际修改form或返回有用的内容。当您遇到一个带有字符串(或非对象(的值时，需要修改对象的键。如果遇到对象的值，可以再次调用函数来修剪其值。

const trimFields = form => _.forIn(form, (element, k) => {
if(_.isObject(element)) {
trimFields(element)
} else {
form[k] = _.trim(element); // set the object's key to be the trimmed version of its element
} 
});
trimFields(form);
// set the values of the elements... 

不过，以上内容不需要lodash方法，您可以使用标准的内置结构来执行您想要的内容。

话虽如此，我建议您使用_.mapValues()来生成一个新的表单对象，而不是修改当前的表单对象。这是通过返回对象应该采用的新值来实现的。如果element是一个对象，您可以在它上递归地重新运行函数来映射element的对象。如果它不是对象，则可以使用lodash的_.trim()方法返回当前对象值的修剪值。

const trimFields = form => _.mapValues(form, 
element => _.isObject(element) ? trimFields(element) : _.trim(element)
);

参见以下示例：

const form = {name: '   John Doe   ', email: '[e-mail]', handle: 'jdoe', social: { facebook: '    John Doe's page', twitter: '@jdoe'}};
const trimFields = form => _.mapValues(form, 
element => _.isObject(element) ? trimFields(element) : _.trim(element)
);
const new_form = trimFields(form);
document.getElementById('name').value = new_form.name;
document.getElementById('email').value = new_form.email;
document.getElementById('handle').value = new_form.handle;
document.getElementById('facebook').value = new_form.social.facebook;
document.getElementById('twitter').value = new_form.social.twitter;

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<div style="display: flex; flex-direction: column">
<input type="text" id="name" />
<input type="email" id="email" />
<input type="text" id="handle" />
<input type="text" id="facebook" />
<input type="text" id="twitter" />
</div>

Answer 2

很好地为您提供了：

1. 从未实际触发trimFields。缺少trimFields(表单(
2. 用CCD_ 7中的数据填充输入。要修剪的值永远不会用于填充表单字段。换句话说，您并没有对原始form对象进行更改