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

永远记住拇指法则。

永远不要在setState函数中编写render。

您需要从myChangeHandler函数中取出render并将其提供给您的输入。

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

Demo

Answer 2

在许多不同的情况下都会发生此错误。例如，当您调用有错误的组件或错误地为其开具发票时。

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);

请记住，在使用导出默认值时，不必使用方括号来导入组件。

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）

2 个答案: