javascript - How prevent multiple client-side rerendering in Next.js (latest version)

Question

I'm fetching some data from a geocoding API (HERE) in my ContextProvider. Then I use that data inside the underneath posted component:

const Results = memo(() => {
  const {
    userLng,
    userLat,
    marke,
    modell,
    buyRent,
    umkreis,
    query,
  } = useContext(IndexContext)

  const results = items.filter(
    (i) =>
      (haversineDistance([userLat, userLng], [i.lat, i.lng]) <= umkreis ||
        umkreis === 'egal') &&
      (i.marke.toLocaleLowerCase() === marke ||
        marke === '' ||
        marke === 'egal') &&
      (i.modell.toLocaleLowerCase() === modell ||
        modell === '' ||
        modell === 'egal') &&
      ((i.buy === true && buyRent === 'kaufen') ||
        (i.rent === true && buyRent === 'mieten'))
  )

  console.log(results)

  if (query === '') {
    return <InitialPage />
  } else if (results.length !== 0) {
    return (
      <>
        {results.map((i) => {
          return (
            <div key={uuid()} className="border mt-4">
              <Result
                marke={i.marke}
                modell={i.modell}
                query={query}
                userLat={userLat}
                userLng={userLng}
                lat={i.lat}
                lng={i.lng}
              />
            </div>
          )
        })}
      </>
    )
    // dieser code sollte erst ausgeführt werden wenn obiges scheitert :/ - hinbekommen!
  } else if (results.length === 0) {
    return <p>NOTHING FOUND</p>
  }
})

export default Results

What the code is doing:
Based on the user's Input there are either results displayed or not. If there is no result for a query, then I want to simply display NOTHING FOUND.

The problem:
On the first page load the console logs:
[ ]
This is expected

After inserting a query for the FIRST TIME the console logs:
[ ]
[ ]
[ {...}, {...}, ... ]
This is not expected and my goal is to only log [ {...}, {...}, ... ] without the two preceding [ ]
BECAUSE by that the users see the message NOTHING FOUND for a short time until the array is filled (the 3rd console log).

When inserting another query after the first one, the behavior is as expected and no empty arrays appear in the console.

Can someone help please ?? as you can see I already tried memo but it has no effect.

Answer 1

等待大神答复