Javascript setState（）重新加载整个页面，而不是仅重新呈现组件

我正在尝试更新组件中的表。一旦我得到了方法的新值，我将这个值连接到数组并调用setState方法。但它不是只重新呈现组件，而是重新加载整个页面并仅显示以前的数组值

我的代码如下：

export default class DataSrcInfoFields extends React.Component {

constructor(props){
    super(props);

    this.state = {
        dataSrcFieldList : this.props.fields,
    };

    this.handleNewRowSubmit = this.handleNewRowSubmit.bind(this);
    this.handleRowRemoval = this.handleRowRemoval.bind(this);
}

handleNewRowSubmit(dataSrcFieldVal){
    const newList = this.state.dataSrcFieldList.concat(dataSrcFieldVal);

    this.setState({dataSrcFieldList: newList});
}

handleRowRemoval(field){

}

render(){
    return(
        <div>
            <div>
                <DataSrcInfoFieldList dsFieldList={this.state.dataSrcFieldList} onFieldRemove={this.handleRowRemoval} />
            </div>
            <div>
                <DataSrcInfoAddField onNewFieldSubmit={this.handleNewRowSubmit} />
            </div>
        </div>
    );
}

}

导出默认类DataSrcInfo.Component{
建造师（道具）{
超级（道具）；
此.state={
dataSrcFieldList:this.props.fields，
};
this.handleNewRowSubmit=this.handleNewRowSubmit.bind（this）；
this.handlerowRemoving=this.handlerowRemoving.bind（this）；
}
handleNewRowSubmit（dataSrcFieldVal）{
const newList=this.state.dataSrcFieldList.concat（dataSrcFieldVal）；
this.setState（{dataSrcFieldList:newList}）；
}
把手箭头拆卸（现场）{
}
render（）{
返回(
);
}
}

我已经尝试在方法内部打印新值（dataSrcFieldVal），因此没有问题。还将创建包含dataSrcFieldVal的newList数组。我还在构造函数中绑定了handleNewRowSubmit方法

谁能帮我解决这个问题，告诉我哪里出了问题

---

谢谢

这个方法很好。您的代码中还有一些其他问题。需要更多代码。您从何处调用它，并且您的渲染方法etcDo不会改变状态。尝试使用Array.from（this.state.dataSrcFieldList）复制该值。另外，请分享您的其他代码片段，以便我们可以查看它并提供帮助：）大家好，感谢您的快速响应。我已经更新了代码。我创建了一个JSFIDLE，它与您的代码类似，运行良好。请查收。