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。这样，您可以进行恒定查找，而不是让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})
})

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

2 个答案: