时间戳

首页 > 解决方案 > 如何在 React Js 中处理生成的大表单

javascript - 如何在 React Js 中处理生成的大表单

问题描述

我试图根据从服务器获得的内容生成一个大表单。有时我生成 32 个元素，有时 57 或 4 个我不知道。我尝试为每种类型的元素创建一个组件，例如选择、文本、数字、文本区域等。每个组件将值传递给父组件并 setState 将值传递给父组件。

想象一下我有 20 个输入和自定义选择选项元素。当我在其中一个输入字符中键入内容时，会在 2 秒后出现，并且我的组件中有一个巨大的滞后。我知道由于 setState 方法，我的洞组件（我的意思是我的父组件或我的单一事实来源）重新渲染并导致问题。

事实上，我不知道其他方法。我尝试使用“this.VARIABLE”而不是 setState，而是更新了“this.VARIABLE”并解决了问题。但我需要我的状态。

任何帮助或解决方案？

我的代码（父组件，事实来源）：

// ---> find my component based on the type that I get from server
findComponent ( item , index) {

        if ( item.type === 'text' || item.type === 'number') {
            return (<Text data={item} getUpdated={this.fetchingComponentData} />);

        } else if ( item.type === 'longtext') {
            return (<Textarea data={item} getUpdated={this.fetchingComponentData} />);

        } else if ( item.type === 'select' ) {
            return (<SelectOption data={item} getUpdated={this.fetchingComponentData} />);

        } else if ( item.type === 'autocomplete') {
            return (<AutoTag data={item} url={URL1} getUpdated={this.fetchingComponentData} />);

        } else if ( item.type === 'checkbox_comment' ) {
            return (<CheckboxComment data={item} getUpdated={this.fetchingComponentData} />);

        } else if ( item.type === 'multiselect' ) {
            return (<Multiselect data={item}  getUpdated={this.fetchingComponentData} />);

        } else {
            return (<p>THERE IS NO TYPE OF => {item.type}</p>);
        }
    }


// ----> if i setState here ==> big lag
fetchingComponentData(OBJ) {

        let index = null;
        // let Answer = [...this.state.Answer];

            index = Helper.find_item(this.Answer , OBJ , 'unique_key');

            if ( index === -1 ) {
                this.Answer.push(OBJ);
            } else {
                this.Answer[index].value = OBJ.value;
            }
    }


// ----> in my render method

render () {
return (
                <React.Fragment>
    
                    <div className="row Technical section" data-info="Technical">
                        <div className="col-6">
                            
                            {data.map( (item,index) => {
                                return (
                                    <React.Fragment key={index}>
                            
                                        <div className="rowi">
                                            {item.attributes.map( (item, index)=> {
                                                return <React.Fragment key={index}>{this.findComponent(item, index)}</React.Fragment>;
                                            })}
                                        </div>
                                    </React.Fragment>
                                )
                            })}
                        </div>
                        <div className="col-6"></div>
                    </div>
    
                </React.Fragment>
            );
}

标签： javascriptreactjs

解决方案

您是否尝试过从组件中创建一个对象并立即将其传递给 setState？

const nextState = componentList.map(component => {
    return {[component]: value};
});

this.setState({...nextState});

编辑：好的，我得到了另一个你可以做得更好的部分。

您应该使用componentWillMount函数中的组件构建一个数组，而不是获取渲染中的所有数据。就像您说的那样，每次状态更改时它都会更新，并且所有组件也随着父级更新。

这是我之前建议的补充，但由于对资源的影响，它更为重要。

推荐阅读