使用遞歸 function 修剪字段無法按預期工作

Question

我試圖在提交之前修剪表單的字段，但由於某種原因，這些值保持不變。 遞歸 function 定義為：

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

但這根本不起作用，它似乎只是保持原始值。

我在這里做錯了什么？

小提琴

Answer 1

您的遞歸 function 從未實際修改form或返回有用的東西。 當您遇到帶有字符串（或非對象）的值時，您需要修改對象的鍵。 如果您遇到 object 的值，您可以再次調用 function 以調整其值。

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()生成一個新表格 object，而不是修改您當前的表格 object。 這通過返回 object 應該采用的新值來工作。 如果element是 object，您可以在其上遞歸地重新運行 function 到 map element的對象。 如果不是 object，您可以使用 lodash 的_.trim()方法返回當前 object 值的修剪值。

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

請參見下面的示例：

 const form = {name: ' John Doe ', email: 'john@doe.com', 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(form)。
2. 用form中的數據填充輸入。 您打算修剪的值永遠不會用於填充您的表單字段。 換句話說，您並沒有改變您的原始form object。