javascript - 难以理解 React setState 异步性

Question

这个问题已经有答案了:

JavaScript property access: dot notation vs. brackets? (17 个回答)

已关闭 5 年前。

我正在编写的 React 应用程序遇到问题，我认为它源于 setState() 的异步性。我的代码如下所示:

import React, { Component } from 'react';
import TextInput from './TextInput';
import TextDisplay from './TextDisplay';
import Dropdown from './Dropdown';

const langs = {
arabic: ['ا', 'ب', 'غ', 'ج', 'ذ', 'د', 'ه', 'ة', 'و', 'ز', 
'ح', 'ط', 'ظ', 'ي', 'خ', 'ك', 'ل', 'م', 'ن', 'س', 'ع', 'ف', 
'ص', 'ض', 'ق', 'ر', 'ش', 'س', 'ت', 'ث', 'ّ', 'أُ', 'إ', 'أ', 
'ئ', 'ٍ', 'ً', 'ِ', 'ُ', ' ', '\n'],
judeoArabic: ['א', 'ב', 'ג', 'ג֔', 'ד', 'דּ', 'ה', 'ה֕', 'ו', 'ז', 
'ח', 'ט', 'ט֔', 'י', 'כ', 'כּ', 'ל', 'מ', 'נ', 'ס', 'ע', 'פ', 'צ', 
'צ֔', 'ק', 'ר', 'שׁ', 'ס', 'תּ', 'ת', '֝', 'ו', 'י', 'א', 'אְי', 'ינ', 
'אנ', 'י', 'ו', ' ', '\n']
};

class Home extends Component {
  constructor(props) {
  super(props);
  this.state = {value: '',
  displayValue: '',
  inLang: '',
  outLang: ''
  };

  this.handleChange = this.handleChange.bind(this);
  this.handleSet = this.handleSet.bind(this);
  this.handleClear = this.handleClear.bind(this);
  this.handleInLang = this.handleInLang.bind(this);
  this.handleOutLang = this.handleOutLang.bind(this);
}

handleChange(e) {
  this.setState({value: e.target.value});
}

handleSet(inLang, outLang, letter, indices, display) {
  indices = [];
  display = [];
  inLang = this.state.inLang;
  outLang = this.state.outLang;
  for (var i = 0; i < this.state.value.length; i ++) {
    letter = this.state.value.charAt(i);
    indices.push(langs.inLang.indexOf(letter));
  }
  for (i = 0; i < indices.length; i ++) {
    display.push(langs.outLang[indices[i]]);
  }
  this.setState({displayValue: display.join('')});
}

handleClear() {
  this.setState({displayValue: ''});
}

handleInLang(e) {
  this.setState({inLang: e.target.value});
}

handleOutLang(e) {
  this.setState({outLang: e.target.value});
}

render() {
    return (
        <div className="App">
        <header className="App-header">
        <h1 className="App-title">Judeo-Arabic Transliterator v 2.0</h1>
      </header>
      <p className="App-intro">
        Enter your Hebrew text below, and select the language to see your transliteration
        </p>
      <Dropdown placeholder={'From'} handleChange={this.handleInLang}/>
      <Dropdown placeholder={'To'} handleChange={this.handleOutLang}/>
      <TextInput handleChange={this.handleChange}/>
      <button onClick={this.handleSet}>Transliterate</button>
      <button onClick={this.handleClear}>Clear</button>
      <TextDisplay textDisplay={this.state.displayValue}/>
    </div>
    )
}
}

export default Home;

当我运行我的开发服务器时，它最初渲染得很好。我可以选择一个下拉项，它是langs中声明的语言之一。多变的。但是，当我输入一些文本并单击 Transliterate 时按钮，我收到此错误:TypeError: Cannot read property 'indexOf' of undefined 。它指的是第 44 行:indices.push(langs.inLang.indexOf(letter)); .

我的假设是langs.inLang未定义，因为当我从下拉菜单中选择时更新了状态，现在我尝试访问状态，就像它已更新一样。但是，我并不肯定这是我做错的事情。如果是的话，那么我对如何处理这种异步性仍然有点模糊。我真的很感谢任何帮助。

此外，如果对我的代码有任何其他批评，请随时分享。

Answer 1

您需要使用括号表示法来动态访问对象属性。

indices.push(langs[inLang].indexOf(letter));

同样:

display.push(langs[outLang][indices[i]]);