TypeError:instance.render不是在React中创建动态输入的函数white

Question

我在React中创建动态输入时收到错误"TypeError:instance.render不是函数"。

import React, { Component } from 'react';
import Input from '../../Ui/Input/Input';
class InputElements extends Component{
state = {
orderForm : {
name: {
elementType : 'input',
elementConfig: {
type : 'text',
placeholder : 'Enter Your Name'
},
value : ''
},
email: {
elementType : 'input',
elementConfig: {
type : 'email',
placeholder : 'Enter Your E-Mail'
},
value : ''
},
street: {
elementType : 'input',
elementConfig: {
type : 'text',
placeholder : 'Street Name'
},
value : ''
},
postal: {
elementType : 'input',
elementConfig: {
type : 'number',
placeholder : 'Postal Code'
},
value : ''
},
},
}
return(){
const formElementArray = [];
for(let key in this.state.orderForm){
formElementArray.push({
id: key,
config: this.state.orderForm[key]
});
}
return(
<div>
<form>
{formElementArray.map(formElement => (
<Input 
key={formElement.id}
elementtype={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value} 
/>
))}
<button>Submit</button>
</form>
</div>
)
}
}
export default InputElements;

在这里我创建了输入组件。我在React中创建动态输入时收到错误"TypeError:instance.render不是函数"。我不知道问题出在哪里
我在React中创建动态输入时收到错误"TypeError:instance.render不是函数"。我不知道问题出在哪里。

import React from 'react';
import './Input.css';
const Input = (props) => {
let inputElement = null
console.log(props)
switch (props.elementtype){
case ('input') : 
inputElement = <input className='InputElement' {...props.elementConfig} value={props.value} />
break;
case ('textarea') : 
inputElement = <textarea className='InputElement' {...props.elementConfig} value={props.value} />
break;
default :
inputElement = <input className='InputElement' {...props.elementConfig} value={props.value} />
break;
}
return (
<div className='Input'>
<label className='Lable'>{props.lable}</label>
{inputElement}
</div>
)
}
export default Input;

Answer 1

简单的答案是class组件需要一个render函数，您有点像它，但它不被称为render。相反，它被称为return。

您需要这个：(注意，它显示render作为方法名称(。

render(){
const formElementArray = [];
for(let key in this.state.orderForm){
formElementArray.push({
id: key,
config: this.state.orderForm[key]
});
}
return(
<div>
<form>
{formElementArray.map(formElement => (
<Input 
key={formElement.id}
elementtype={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value} 
/>
))}
<button>Submit</button>
</form>
</div>
)
}

然而，这里还有其他问题。更改该方法名称将显示您的UI，但当有人在字段中键入时，它不会更新。您的字段数据需要保存在某个状态下。现在，你已经将它设置在input元素类中，但你从未更新过它。当输入字段发生变化时，你需要更新你的状态。

我将从一个保存状态的简单组件和一个可以更新该状态以熟悉该机制的子组件开始，然后再深入研究您试图实现的目标。一旦您了解了状态是如何更新的，就应该很容易了解该应用程序的结构。