React JS 在 for 循环中更新 setState

Question

我希望能够将数组值添加到 React JS 中的setState 。 基本上我正在为城市做一个搜索栏。 每次用户键入时，它都会更新setState以包含更过滤的搜索。 基本上，如果用户想要搜索“加利福尼亚州洛杉矶”，他们会首先输入“L”。 因此，程序会搜索所有以“L”开头的城市并将它们添加到setState中。 然后用户继续“Lo”，然后程序搜索所有以“Lo”开头的城市，并仅使用以“Lo”开头的城市更新setState ，依此类推。

出于某种原因，它总是重复同一个城市 100 次。 因此，如果该人键入“L”，它会将第一个城市添加到setState 100 次，而不是前 100 个不同的城市。 下面是我的代码。 我在 for 循环中使用它。

cities已经是每个城市的 state 和美国的 state。 thisCity和thisState已经被声明。

for (var i = 0; i < cities.length; i++){
      if(cities[i].city.toUpperCase().startsWith(e.target.value.toUpperCase())){
        thisCity = cities[i].city;
        thisState = cities[i].state;

        setSuggest((suggest) => [...suggest, {id: Math.random() * 1000,
        city: thisCity,
        state: thisState}])
      }
}

Answer 1

这里有几个问题。

首先，将var i = 0替换为let i = 0 。 var作用域是全局的，而let作用域是块。

其次，您没有声明变量thisCity和thisState ，因此它们也是全局设置的。 使用const声明它们，因为它们不会改变。

每当调用 setSuggest 中的回调 function 时，它会获取设置为 thisCity 和 thisState 的最后一个值，而不是该块范围内的值。 这是因为回调 function 稍后执行。 如果您将一个console.log 放在setSuggest 中，另一个放在for 循环的末尾，您会看到for 循环的日志出现在setSuggest 的日志之前。

最后，你应该先弄清楚城市列表，然后设置你的 state。 这将显着提高性能。 总的来说，我建议更换你的 for 循环，以支持使用数组方法.filter ：

const compareTo = e.target.value.toUpperCase();
const suggestions = cities.filter(city => (
  city.toUpperCase().startsWith(compareTo)
));
setSuggest(suggestions);

我发现这篇文章可以帮助您更好地理解变量 scope： https://dmitripavlutin.com/javascript-scope-gotchas/