我正在制作一个全栈应用程序，使用 MERN 堆栈通过经典算法加密文本。在前端，它有一个用于输入文本的表单、所需的算法和要使用的因子。它应该在输入加密文本时呈现它，所以我有一个函数来处理对表单的任何更改 - 目前它是一项正在进行的工作，因此 console.logs:

import React, { Component } from 'react'
import CipherService from './../../services/ciphers.service'

import Form from 'react-bootstrap/Form'

import './InputForm.css'

class InputForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      cipher: 'caesar',
      factor: 13,
    }

    this.cipherService = new CipherService()
  }

  handleChange = (e) => {
    let { value, name } = e.target
    if (name === 'factor') {
      value = parseInt(value)
    }
    this.setState({ [name]: value })
      .then(() => {
        switch (this.state.cipher) {
          case 'caesar':
            this.cipherService
              .caesar(this.state)
              .then((result) => console.log(result.data.message))
              .catch((err) => console.log(err))
            break
        }
      })
      .catch((err) => console.log(err))
  }

  render() {
    return (
      <Form.Group as='section'>
        <Form.Control as='textarea' name='text' onChange={this.handleChange} />
        <Form.Text className='text-muted'>
          Please only input Latin characters without diacritics or spaces.
        </Form.Text>
        <div className='options-container'>
          <Form.Control as='select' name='cipher' onChange={this.handleChange}>
            <option value='caesar'>Caesar cipher</option>
          </Form.Control>
          <Form.Control
            as='input'
            type='number'
            name='factor'
            value={13}
            onChange={this.handleChange}
          />
        </div>
      </Form.Group>
    )
  }
}

export default InputForm

就目前而言，如果表单的状态发生变化，应用程序就会崩溃并输出此错误：

TypeError: this.setState(...) is undefined
InputForm/this.handleChange
src/components/InputForm/InputForm.js:25
  22 | if (name === 'factor') {
  23 |   value = parseInt(value)
  24 | }
> 25 | this.setState({ [name]: value })
     | ^  26 |   .then(() => {
  27 |     switch (this.state.cipher) {
  28 |       case 'caesar':

我猜这是一个上下文问题，但我找不到导致问题的确切原因。让函数在解析 this.setState 后调用 API，不保证能正常工作，但由于 setState 是一个异步操作，它会将“上一个”状态传递给 API，从而产生不良结果。