在另一个数组内的数组中搜索对象的最佳/最有效方法是什么？

Question

I am building a simple application that stores places I've visited. I have a local express server using a db.json file as my database. I am making 2 requests and experiencing a problem.

What I'm trying to do is iterate over both arrays so that when the app loads, countries I've been too are already preselected. this seems like a super expensive call to make and has quite slow performance already

Also it's not actually doing what I want until I trigger a second re-render of the DOM and then it updates.

eg if I pre-select Croatia and France in the database and then load the app, none are selected. but if I then select Korea (eg) then in the visited list, suddenly all 3 are visible

what would be a better way to compare the arrays? considering the object keys are not necessarily the same

componentDidMount(){
axios.get('https://restcountries.eu/rest/v2/all').then((data) => {
  const updatedCountries = data.data.map((country) => {
    return {...country, visited: false, cities: [], showCities: false}
  })
  axios.get('http://localhost:3007/countries').then((countries) => {
    const visitedCountries = countries.data
    for (var i = 0; i < visitedCountries.length; i++){
      for (var k = 0; k < updatedCountries.length; k++){
        if(visitedCountries[i].name === updatedCountries[k].name){
          updatedCountries[k].visited = true
        }
      }
    }
  })
  this.setState({countries: updatedCountries})
})
  }

Answer 1

Instead of using an array to store updatedCountries, you should instead use an object. That way instead of having each element of updatedCountries compare to every element of visitedCountries, you can do a constant lookup. This will change your lookup speed from (n*n) to (n).

The reason why you do not initially see any updates is because you have an async call:

axios.get('http://localhost:3007/countries')

inside of a synchronous function. As a result, you are resetting the state while you are making the get request. Instead you should chain your api calls like

axios.get('https://restcountries.eu/rest/v2/all').then((data) => {
  // edit data
  return axios.get('http://localhost:3007/countries')
}).then((data) => {
  // run function comparing both data
  this.setState({countries: updatedCountries})
})

Answer 2

You need update state in second request success callback function

componentDidMount(){
axios.get('https://restcountries.eu/rest/v2/all').then((data) => {
  const updatedCountries = data.data.map((country) => {
    return {...country, visited: false, cities: [], showCities: false}
  })
  axios.get('http://localhost:3007/countries').then((countries) => {
    const visitedCountries = countries.data
    for (var i = 0; i < visitedCountries.length; i++){
      for (var k = 0; k < updatedCountries.length; k++){
        if(visitedCountries[i].name === updatedCountries[k].name){
          updatedCountries[k].visited = true
        }
      }
    }

    this.setState({countries: updatedCountries})
  })

})
  }

For efficient way to search

axios.get('http://localhost:3007/countries').then((countries) => {
    let visitedCountriesName = new Set(countries.data.map(country => country.name));
    updatedCountries = updatedCountries.map((country) => {
        if (visitedCountriesName.has(country.name)) country.visited = true
        return country
    });
    this.setState({countries: updatedCountries})
})