Блог

Я получаю эту ошибку ‘TypeError: instance.render не является функцией белого цвета, создающей динамические входные данные в React.

 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;
 

Здесь я создал компонент ввода.
Я получаю эту ошибку ‘TypeError: instance.render не является функцией белого цвета, создающей динамические входные данные в React. Я не знаю, в чем проблема.
Я получаю эту ошибку ‘TypeError: instance.render не является функцией белого цвета, создающей динамические входные данные в React. Я не знаю, в чем проблема.

 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;
 

Короткий ответ заключается в том, что для компонентов класса требуется 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>
        )
    }
 

Однако здесь есть и другие проблемы. Изменение этого имени метода приведет к отображению вашего пользовательского интерфейса, но он не будет обновляться, когда кто-либо вводит данные в поля. Ваши данные поля должны быть сохранены где-то в каком-то состоянии. Прямо сейчас у вас установлено, что он находится в классе input elements , но вы никогда не обновляете его. Вам необходимо обновить свое состояние при изменении полей ввода.

Я бы начал с простого компонента, который содержит состояние, и дочернего компонента, который может обновлять это состояние, чтобы ознакомиться с этим механизмом, прежде чем погрузиться в то, что вы пытаетесь выполнить выше. Как только вы поймете, как обновляются состояния, должно быть легко понять, как это приложение должно быть структурировано.