嗨，我正在嘗試為每個輸入欄位顯示一個加載程式，但只有當他們輸入一個值時。我得到的行為是，如果我在微調器為所有人顯示的文本輸入之一中輸入一個值。我需要根據兩個陣列的差異，通過陣列鍵來確定我的加載狀態。
類似于這篇文章 ->如何在 JavaScript 中獲取兩個物件陣列之間的差異
const [isLoading, setIsLoading] = useState('');
// before any value has been entered
const initialFormData = [{key: 'USER_DEFINED_QUESTIONS', value: ''}, {key: 'RECOMMENDED_FIELDS', value: ''}]
// when a value has been entered
const values = [{key: 'USER_DEFINED_QUESTIONS', value: 'test'}, {key: 'RECOMMENDED_FIELDS', value: ''}]
const saveSubmit = async (values) => {
const arrValues = Object.entries(values).map((val) => ({
field: val[0],
value: val[1],
}));
const arrInitialFormValues = Object.entries(initialFormData).map(
(val) => ({
field: val[0],
value: val[1],
}),
);
const result = arrValues.filter(
(o1) => !arrInitialFormValues.some((o2) => o1.key === o2.key),
);
const body = { ...values };
setIsLoading(result);
const res = await putResults({ id, body });
if (res && !(await checkErrors(res))) {
return res;
}
setIsLoading(result);
}
return null;
};
uj5u.com熱心網友回復：
首先，我會將陣列映射到一個物件中（這不是必需的，這樣感覺更干凈）。
values = Object.fromEntries(a.map(entry => [entry.key, entry.value]))
然后我相信，您真正需要的只是找到所有具有非負“值”的條目（如果不是這種情況，請在下面發表評論，我將更正此答案）。
usedFields = Object.entries(values).filter(entry => entry[1])
uj5u.com熱心網友回復：
您可以結合重命名和過濾器
const saveSubmit = async (values) => {
const result = initialFormData.reduce((acc, a) => {
const diff = values.find((b) => a.key === b.key && a.value !== b.value)
return diff
? [
...acc,
{
field: diff.key,
value: diff.value,
},
]
: acc
}, [])
const body = { ...values }
setIsLoading(result)
const res = await putResults({ id, body })
if (res && !(await checkErrors(res))) {
return res
}
setIsLoading(result)
}
uj5u.com熱心網友回復：
如果您只想獲得差異，這就是我可以從問題標題中讀取的內容，這不應該起作用嗎？
const initialFormData = [{key: 'USER_DEFINED_QUESTIONS', value: ''}, {key: 'RECOMMENDED_FIELDS', value: ''}];
// when a value has been entered
const values = [{key: 'USER_DEFINED_QUESTIONS', value: 'test'}, {key: 'RECOMMENDED_FIELDS', value: ''}];
const result = values.filter(x => initialFormData.find(y=> x.key===y.key && x.value!==y.value));
console.log('res', result)轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/323452.html
標籤：javascript 反应
上一篇：多個Typescript錯誤，我不知道如何修復它們-型別不可分配、不兼容等
下一篇：我想在反應陣列中添加一個物件