Estoy creando una selección con datos recuperados de dos llamadas api.
Llamo a la primera API para obtener todos los resultados de las personas.
Llamo a la segunda api (con paginación, por lo que hago en cualquier momento el número de página para obtener cada vez 20 datos más).
Ahora, a partir del resultado de la segunda llamada a la API, debería deshabilitar o no mostrar los mismos resultados que la primera llamada a la API.
Este es mi código:
const SelectAsyncPaginatePeople = props => { const [listPeople, setListPeople] = useState(null) useEffect(() => { findListPeople() }, []) const findListPeople = async () => { const response = await fetch(`${apiCall1}`) const optionListPeople = await response.json(); setListPeople(optionListPeople); } const loadOptions = async (searchQuery, loadedOptions, { page }) => { const response = await fetch( `${apiCall2}?page=${page}&size=20&deletedDate.specified=false${searchQuery.length >= 3 ? `&personName.contains=${searchQuery}` : '' }` ); const optionPerson = await response.json(); let optionToShow = [] optionToShow.push(...optionToShow, ...optionPerson.filter((re) => !listPeople.some((rent) => { return re.peopleID === rent.personID }))) return { options: optionToShow, hasMore: optionToShow.length >= 1, additional: { page: searchQuery ? 2 : page + 1, }, }; }; const onChange = option => { if (typeof props.onChange === 'function') { props.onChange(option); } }; return ( <AsyncPaginate value={props.value} loadOptions={loadOptions} getOptionValue={option => option.personID} getOptionLabel={option => option.personName} onChange={onChange} isClearable={true} isSearchable={true} placeholder="Select Person" additional={{ page: 0, }} /> ); };Ahora de esta manera obtengo los primeros 20 datos del apicall2, y filtro con el resultado del apiCall1.
Pero el problema es que cuando llamo a la segunda página (para apiCall2), los datos no se filtran otra vez con los datos de apiCall1.
Lo que me gustaría obtener:
ApiCall1: dataApiCall1, ApiCall2 (with page: 1) : dataApiCall2(first 20 data) dataApiCall2 - dataApiCall1 = dataNotIncludedinApiCall1 // and this work. ApiCall2 (with page: 2) : dataApiCall2(other 20 data) dataApiCall2 - dataApiCall1 = dataNotIncludedinApiCall1
...
Es un poco difícil saberlo por el código que publicaste, sin más contexto. Probablemente se deba a que no está actualizando el estado en loadOptions
Además, no deberías usar push(), especialmente en React. Trate de no usar métodos mutables. Las líneas:
let optionToShow = [] optionToShow.push(...optionToShow, ...optionPerson.filter((re) => !listPeople.some((rent) => { return re.peopleID === rent.personID })))Debe ser refactorizado para
let optionToShow = [...new Map([...optionPerson, ...listPeople].map((item, key) => [item[key], item])).values()];Puede encontrar una excelente explicación del fragmento anterior aquí
Aunque para que lo anterior funcione, debe asegurarse de que las claves de objeto sean las mismas. (Incluso si no va a usar ese fragmento, debe hacerlo. Es bueno mantener la coherencia del código).