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

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

我要做的是迭代两个数组，这样当应用程序加载时，我去过的国家都已经预选好了。这似乎是一个非常昂贵的呼叫，而且性能已经相当慢了

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

e、 g.如果我在数据库中预先选择克罗地亚和法国，然后加载应用程序，则不会选择任何应用程序。但是如果我选择韩国（例如），那么在访问列表中，突然所有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})
})
  }

componentDidMount（）{
axios.get（）https://restcountries.eu/rest/v2/all）。然后（（数据）=>{
const updatedCountries=data.data.map（（国家）=>{
返回{…国家，访问：假，城市：[]，展示城市：假}
})
axios.get（）http://localhost:3007/countries）。然后（（国家）=>{
const visitedCountries=countries.data
对于（var i=0；i

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

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

})
  }

---

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

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

})
  }

---

您不应该使用数组来存储updatedCountries，而应该使用对象。通过这种方式，您可以进行持续查找，而不是将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})
})

---

您不应该使用数组来存储updatedCountries，而应该使用对象。通过这种方式，您可以进行持续查找，而不是将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})
})

---

哦，太酷了，所以这只是一件小事。就效率而言，这是最好的方法吗？（当它让我接受答案时）哦，酷，所以这只是一件小事。就效率而言，这是最好的方法吗？（当它允许我回答时，我会接受）