Hola, estoy tratando de mostrar un cargador para cada campo de entrada, pero solo cuando han ingresado un valor. El comportamiento que obtengo es si ingreso un valor en una de las entradas de texto que muestra la rueda giratoria para todos. Necesito determinar mi estado de carga en función de la diferencia de las dos matrices, por la clave de la matriz.
Similar a esta publicación -> Cómo obtener la diferencia entre dos matrices de objetos en 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; };En primer lugar, mapearía la matriz en un objeto (esto no es necesario, simplemente se siente más limpio de esta manera).
values = Object.fromEntries(a.map(entry => [entry.key, entry.value]))Entonces creo que todo lo que realmente necesita es encontrar todas las entradas que tengan un "valor" no negativo (si ese no es el caso, comente a continuación y corregiré esta respuesta).
usedFields = Object.entries(values).filter(entry => entry[1])Puedes combinar el cambio de nombre y el filtro.
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) }Si solo desea obtener la diferencia, y eso es lo que puedo leer en el título de la pregunta, ¿no debería funcionar?
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 keysWhichDiffer = values.map(x => initialFormData.find(y=> x.key===y.key && x.value!==y.value)?.key); const result = keysWhichDiffer.filter(x=>x); console.log('res', result)