ReactJS: Select with filter data

Question

I'm creating a select with data recovered from two api calls.

I call the first api to obtain all result of people.

I call the second api (with pagination, so I make any time the page number to obtain every time 20 more data).

Now from the result of the second api call I should disable or not show the same results as the first api call.

This is my code:

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,
      }}
    />
  );
};

Now in this way I obtain the first 20 data from the apicall2, and I filter with the result from the apiCall1.

But the problem is when I call second page (for the apiCall2), the data aren't filtered another time with the data of apiCall1.

What I would to obtain:

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

...

score 1 · Answer 1 · answered Dec 16 '21 at 11:58

It's bit hard to tell from the code you posted, without more context. It's probably because you're not updating the state in loadOptions

Besides, you shouldn't really use push(), especially in React. Try to not use mutable methods. The lines:

let optionToShow = []

 optionToShow.push(...optionToShow, ...optionPerson.filter((re) => !listPeople.some((rent) => { return re.peopleID === rent.personID })))

Should be refactored to

let optionToShow = [...new Map([...optionPerson, ...listPeople].map((item, key) => [item[key], item])).values()];

You can find an excellent explanation of the above snippet here

Albeit for the above to work you should make sure that the object keys are the same. (Even if you're not going to use that snippet, you should do it. It's good to keep your code consistent).

Thank you for your answer, I have implemented as you suggest the snippet. The only problem is that data that are equals are showen as blank field in the select. — Jack23, Dec 16 '21 at 14:18
Are you updating the correct state and passing it correctly as props? — radpsiak, Dec 18 '21 at 19:02

ReactJS: Select with filter data

1 Answers1