UncaughtTypeError-在React組件建構式中定義狀態變數后出現錯誤

我得到了錯誤：Uncaught TypeError: Cannot read properties of undefined (reading 'state')即使state是在我的 React 組件的建構式中定義的。我在將值設定為的行收到<input>錯誤{this.state.deckName}

export class DeckForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            deckName: '',
            deckList: ''
        };
        // Bind our event handler methods to this class
        this.handleDeckNameChange = this.handleDeckNameChange.bind(this);
        this.handleDeckListChange = this.handleDeckListChange.bind(this);
        this.handleSubmission = this.handleSubmission.bind(this);
    }

    // Event handler method to update the state of the deckName each time a user types into the input form element
    handleDeckNameChange(event) {
        let typed = event.target.value;
        this.setState({ deckName: typed });
    }

    // Event handler method to update the state of the deckList each time a user types into the textarea from element]
    handleDeckListChange(event) {
        let typed = event.target.value;
        this.setState({ deckList: typed });
    }

    // Event handler method to handle validation of deckName and deckList
    handleSubmission(event) {
        console.log(`${this.state.deckName}`);
        console.log(`${this.state.deckList}`)
    }

    render() {
        return (
            <form className='was-validated'>
                <this.DeckName />
                <this.DeckList />
                <button type='submit' className='btn-lg btn-warning mt-3'>Create</button>
            </form>                       
        );
    }

    DeckName() {
        return (
            <div className='form-group mb-3'>
                <input 
                    value={this.state.deckName} /* ERROR HERE */
                    onChange={this.handleDeckNameChange} 
                    type='text' 
                    placeholder='Deck name' 
                    className='form-control' 
                    required
                />
            </div>
        );
    }

    DeckList() {
        let format = 'EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3'
        return (
            <div className='form-group'>
                <textarea
                    value={this.state.deckList}
                    onChange={this.handleDeckListChange} 
                    className='form-control' 
                    rows='15' 
                    required
                >
                    {format}
                </textarea>
            </div>
        );
    }
}

uj5u.com熱心網友回復：

使用下面的代碼它對我有用

https://codesandbox.io/s/weathered-water-jm1ydv?file=/src/App.js

DeckName()  {
    return (
      <div className="form-group mb-3">
        <input
          value={this?.state.deckName} /* ERROR HERE */
          onChange={this?.handleDeckNameChange}
          type="text"
          placeholder="Deck name"
          className="form-control"
          required
        />
      </div>
    );
  }

  DeckList() {
    let format =
      "EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3";
    return (
      <div className="form-group">
        <textarea
          value={this?.state.deckList}
          onChange={this?.handleDeckListChange}
          className="form-control"
          rows="15"
          required
        >
          {format}
        </textarea>
      </div>
    );
  }

uj5u.com熱心網友回復：

您可以使用 es6 函式回傳存在于父級之外的組件，而不是使用方法，只更改這部分代碼：

1.代替DeckName(){...}使用DeckName =()=>{....} 2.代替DeckList(){...}使用DeckList =()=>{....}

完整修改代碼：

import React, { Component } from "react";
export class DeckForm extends Component {
  constructor(props) {
    super(props);
    this.state = { deckName: "", deckList: "" };
    // Bind our event handler methods to this class
    this.handleDeckNameChange = this.handleDeckNameChange.bind(this);
    this.handleDeckListChange = this.handleDeckListChange.bind(this);
    this.handleSubmission = this.handleSubmission.bind(this);
  }

  // Event handler method to update the state of the deckName each time a user types into the input form element
  handleDeckNameChange(event) {
    let typed = event.target.value;
    this.setState({ deckName: typed });
  }

  // Event handler method to update the state of the deckList each time a user types into the textarea from element]
  handleDeckListChange(event) {
    let typed = event.target.value;
    console.log(typed);
    this.setState({ deckList: typed });
  }

  // Event handler method to handle validation of deckName and deckList
  handleSubmission(event) {
    console.log(`${this.state.deckName}`);
    console.log(`${this.state.deckList}`);
  }

  render() {
    return (
      <form className="was-validated">
        <this.DeckName />
        <this.DeckList />
        <button type="submit" className="btn-lg btn-warning mt-3">
          Create
        </button>
      </form>
    );
  }

  DeckName = () => {
    return (
      <div className="form-group mb-3">
        <input
          value={this.state.deckName}
          onChange={this.handleDeckNameChange}
          type="text"
          placeholder="Deck name"
          className="form-control"
          required
        />
      </div>
    );
  };

  DeckList = () => {
    let format =
      "EXACT CARD NAME 1\nPot of Greed 3\nChange of Heart 3\nGraceful Charity 3";
    return (
      <div className="form-group">
        <textarea
          value={this.state.deckList}
          onChange={this.handleDeckListChange}
          className="form-control"
          rows="15"
          required
        >
          {format}
        </textarea>
      </div>
    );
  };
}

現場演示： https ://codesandbox.io/s/brave-hill-l0eknx?file=/src/DeckForm.js:0-2091

標籤：javascript 节点.js 反应

上一篇：命名變數顯示為字串

下一篇：如何從resolve()和reject()中獲取多個值？