Question

我试图根据从服务器获得的信息生成一个大表格。有时我生成32个元素，有时我不知道57或4个元素。我尝试为每种类型的元素（例如select，text，number，textarea等）创建一个组件。每个组件将值传递给父组件，并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>
            );
}

Answer 1

您是否尝试过使用组件制造对象并将其立即传递给setState？

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

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

编辑：好的，我还有另外一个可以做得更好的部分。

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

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

如何在React Js中处理生成的大表格

1 个答案: