Устранение неполадок Реагировать sethate asychronicity [duplicate]

У меня возникла проблема с приложением React, которое я пишу, и я думаю, что это связано с асинхронностью setState(). Мой код выглядит так:

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

const langs = {
arabic: ['?', '?', '?', '?', '?', '?', '?', '?', '?', '?', 
'?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?', 
'?', '?', '?', '?', '?', '?', '?', '?', '?', '??', '?', '?', 
'?', '?', '?', '?', '?', ' ', '
'],
judeoArabic: ['?', '?', '?', '??', '?', '??', '?', '??', '?', '?', 
'?', '?', '??', '?', '?', '??', '?', '?', '?', '?', '?', '?', '?', 
'??', '?', '?', '??', '?', '??', '?', '?', '?', '?', '?', '???', '??', 
'??', '?', '?', ' ', '
']
};

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;

Когда я запускаю свой dev-сервер, он изначально выглядит просто отлично. Я могу выбрать выпадающий элемент, который является одним из языков, объявленных в langsпеременной. Однако, когда я введите текст и нажмите Transliterateкнопку, я получаю эту ошибку: TypeError: Cannot read property 'indexOf' of undefined. Он имеет в виду линию 44: indices.push(langs.inLang.indexOf(letter));.

Мое предположение - это langs.inLangнеопределенное, потому что я обновил состояние, когда я выбрал из раскрывающегося меню, и теперь пытаюсь получить доступ к состоянию, как если бы он был обновлен. Однако я не уверен, что это то, что я делаю неправильно. Если да, то я все еще немного расплывчатый, как бороться с этой асинхронностью. Я очень ценю любую помощь.

Кроме того, если есть какие-либо другие критические замечания по моему коду, не стесняйтесь делиться ими.