簡體   English   中英

在設置 state 后制作 promise 時出現“TypeError: this.setState(...) is undefined”

[英]“TypeError: this.setState(…) is undefined” when making a promise after setting state

我正在制作一個完整的堆棧應用程序,使用 MERN 堆棧通過經典算法加密文本。 在前端,它有一個輸入文本的表單、所需的算法和要使用的因素。 它應該在鍵入時呈現加密文本,所以我有一個 function 來處理對表單的任何更改 - 現在它正在進行中,因此 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

就像現在一樣,如果表單的 state 發生變化,應用程序崩潰並輸出以下錯誤:

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':

我猜這是一個上下文問題,但我找不到導致它的確切原因。 Making it so the function calls the API after it parses the this.setState, no promises, makes it work, but because setState is an asynchronous action, it passes the "previous" state to the API, with undesired results.

setState是異步的,但它不會返回 promise 供您在其上使用.then 但是,它提供了一個回調作為第二個參數,您可以使用

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

});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM