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

Question

我正在构建一个简单的应用程序来存储我去过的地方。我有一个使用 db.json 文件作为我的数据库的本地快速服务器。我提出 2 个请求并遇到问题。

我想要做的是遍历这两个数组，这样当应用加载时，我去过的国家/地区就已经被预先选择了。这似乎是一个非常昂贵的调用，并且性能已经相当缓慢

在我触发 DOM 的第二次重新渲染然后它更新之前，它实际上并没有做我想做的事情。

例如如果我在数据库中预先选择克罗地亚和法国，然后加载应用程序，则没有选择。但是如果我然后选择韩国（例如）然后在访问列表中，突然所有 3 都是可见的

比较数组的更好方法是什么？考虑到对象键不一定相同

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

您应该使用对象来代替使用数组来存储更新的国家/地区。这样，您就可以进行持续查找，而不是让 updatedCountries 的每个元素与visitedCountries 的每个元素进行比较。这会将您的查找速度从 (n*n) 更改为 (n)。

您最初看不到任何更新的原因是因为您有一个异步调用：

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

在同步函数内部。因此，您在发出 get 请求时正在重置状态。相反，您应该链接您的 api 调用，例如

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

第二个请求成功回调函数需要更新状态

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})
  })

})
  }

为了高效的搜索方式

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})
})