錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）

Question

我正在學習 React 並且遇到了這個錯誤

元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：對象。

我已經檢查了與類似錯誤相關的所有先前問題，但無法找出問題所在。 這是我的代碼：

import React, { Component } from 'react';



 class   MyForm extends React.Component {


 constructor(props) {
   super(props);
   this.state = {
     drug: '',
     disease:'',
     type:''
   };
 }
  render() {
  const { drug , disease , type } = this.state
    myChangeHandler = (event) => {
    this.setState({[event.target.name]: event.target.value});
  }
    return (
      <form>


        <p>Drug</p>
        <input
          type="text" name="drug" value={drug}
          />


     <p>disease</p>
        <input
          type="text" name="disease" value={disease}
          />



        <p>type</p>
        <input
          type="number" name="type" value={type}
          />



      </form>
    );
  }
}



export default MyForm

Answer 1

永遠記住拇指法則。

你永遠不應該在render函數中寫setState 。

您需要從render函數中取出myChangeHandler並為您的輸入提供相同的內容。

import React, { Component } from 'react';

class MyForm extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          drug: '',
          disease: '',
          type: ''
      };
  }

  //Always keep setState out of the render function
  myChangeHandler = (event) => {
    this.setState({
      [event.target.name]: event.target.value 
    });
  }
  render() {
    const { drug, disease, type } = this.state
    return (
      <form>
        <p>Drug</p>
        //Provide onChange handler to your input's
        <input type="text" name="drug" value={drug} onChange={this.myChangeHandler} />

        <p>disease</p>
        <input type="text" name="disease" value={disease} onChange={this.myChangeHandler} />

        <p>type</p>
        <input type="number" name="type" value={type} onChange={this.myChangeHandler} />

        <div>
          {JSON.stringify(this.state)}
        </div>
      </form>
    );
  }
}

export default MyForm

演示

Answer 2

這種錯誤發生在許多不同的情況下。 例如，當你調用一個有 bug 的組件或者你錯誤地調用它時。

import React from "react";
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      drug: "",
      disease: "",
      type: ""
    };
  }
  render() {
    const { drug, disease, type } = this.state;
    const myChangeHandler = event => {
      this.setState({ [event.target.name]: event.target.value });
    };
    return (
      <form>
        <p>Drug</p>
        <input type="text" name="drug" value={drug} />

        <p>disease</p>
        <input type="text" name="disease" value={disease} />
        <p>type</p>
        <input type="number" name="type" value={type} />
      </form>
    );
  }
}

export default MyForm;

通過在函數上添加 const，組件可以毫無問題地呈現。 確保您也從外部正確調用它。 例如：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import MyForm from "./form";

function App() {
  return (
    <div className="App">
      <h1>Hello Testing</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyForm />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

請記住，在使用 export default 時，不必使用括號來導入組件。