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/