循环内部的setState未正确更新状态

Question

我有3个div。当我点击特定的按钮时，每个人都会有类活动。它们的每个div都有一个状态变量，每当它是真的时，我都会向连接到它的div添加class Name='active'：

当我点击按钮时，状态改变，但是div没有激活类

async activeLang(e) {

  let lang = e.target.getAttribute('lang');

  for (const key in this.state.status) {

    if (key === lang) {
      await this.setState(state => {
        state.status[key] = true
      })
    }else{
      await this.setState(state => {
        state.status[key] = false
      })
    }
  
  }

  console.log(this.state.status);
}

当我将函数更改为此时，它会工作：

   activeLang(e) {
    let lang = e.target.getAttribute('lang');

    this.setState({
      status:{
       en: false,
       ar: false,
       fr: false,
      }
    })

    this.setState(state => {
      state.status[lang] = true
    })

    console.log(this.state.status);
  }

================================================

<ul>
 <li lang="en" onClick={this.activeLang} className={this.state.status.en ? 'active' : '' }>EN</li>
 <li lang="ar" onClick={this.activeLang} className={this.state.status.ar ? 'active' : ''}>AR</li>
 <li lang="fr" onClick={this.activeLang} className={this.state.status.fr ? 'active' : ''}>FR</li>
</ul>

================================================

<div className={this.state.status.en ? 'to-input en active' : 'to-input en'}>
 <input required type='text' onKeyUp={this.onInputChange} />
 <label title='Category name' placeholder='Ex. Business Cards'></label>
</div>

<div className={this.state.status.ar ? 'to-input ar active' : 'to-input ar'}>
 <input required type='text' onKeyUp={this.onInputChange} />
 <label title='اسم الفئة' placeholder='مثال: كروت العمل'></label>
</div>

<div className={this.state.status.fr ? 'to-input fr active' : 'to-input fr'}>
 <input required type='text' onKeyUp={this.onInputChange} />
 <label title='Nom de catégorie' placeholder='Ex. Cartes de visite'></label>
</div>

Answer 1

不要做循环。只要叫它一次：

const lang = e.target.getAttribute('lang');
this.setState(state => ({
   ...state,
   status: Object.keys(state.status).reduce((acc,key) => ({
     ...acc,
     [key]:state.status[key] === lang // set all statuses to false except for `lang`
   }),{});
});

编辑：

此外，setState不返回promise，您不能等待它。它确实接受回调，但这不是最好的解决方案（见上文）。

你不应该在循环中调用setState，会发生混乱的事情。

编辑#2：

从表面上看，我有一个更好的解决方案。一次只能有一个lang激活状态，因此您不需要status-您只需要知道激活的语言是什么，因此：

const state = { activatedLang: 'en' } // or 'fr' or 'ar'

然后你可以这样做：

this.setState({ activatedLang: e.target.getAttribute('lang') });