请求静态内容时与Express服务器的连接停止

Question

我正在本地和远程运行相同的服务器。 class App extends React.Component { constructor(props) { super(props); this.state = { data: [], dataNewJson: [], library: null, libraryNewJson: null, perPage: 5, currentPage: 1, maxPage: null, perPageNewJson: 3, currentPageNewJson: 1, maxPageNewJson: null, } } componentDidMount() { fetch('/json.bc', { method: 'POST', }) .then(response => response.text()) .then(text => { const Maindata = JSON.parse(text.replace(/\'/g, '"')) const { First } = Maindata.find(a => a.type === "1") || {} const MergedData = Maindata.filter(a => a.type === "2") .map(a => { const Second = a.Second.map(b => ({ ...b, First })) return { ...a, Second } }) const MergedDataFinal = MergedData[0].Second this.setState(state => ({ ...state, data: MergedDataFinal }), () => { this.reorganiseLibrary() }) }).catch(error => console.error(error)) fetch('/new-josn.bc', { method: 'POST', }) .then(response => response.text()) .then(text => { const Maindata = JSON.parse(text.replace(/\'/g, '"')) this.setState(state => ({ ...state, dataNewJson: Maindata }), () => { this.reorganiselibraryNewJson() }) }).catch(error => console.error(error)) } reorganiseLibrary = () => { const { perPage, data } = this.state; let library = data; library = _.chunk(library, perPage); this.setState({ library, currentPage: 1, maxPage: library.length === 0 ? 1 : library.length }) } reorganiselibraryNewJson = () => { const { perPageNewJson, dataNewJson } = this.state; let libraryNewJson = dataNewJson libraryNewJson = _.chunk(libraryNewJson, perPageNewJson); this.setState({ libraryNewJson, currentPageNewJson: 1, maxPageNewJson: libraryNewJson.length === 0 ? 1 : libraryNewJson.length }) } handlePerPage = evt => { this.setState({ perPage: evt.target.value }, () => this.reorganiseLibrary()); this.setState({ perPage: evt.target.value }, () => this.reorganiselibraryNewJson()); } renderLibrary = () => { const { library, currentPage } = this.state; if (!library || (library && library.length === 0)) { return '' } return library[currentPage - 1].map((item, i) => ( <span>{item.nameSecond}</span> )) } renderLibraryFirst = () => { const { libraryNewJson, currentPageNewJson } = this.state; if (!libraryNewJson || (libraryNewJson && libraryNewJson.length === 0)) { return '' } return libraryNewJson[currentPageNewJson - 1].map((item, i) => ( <div onClick={((e) => this.ChangeObjectFirst(e, i))}>Change</div> )) } render() { const { library,libraryNewJson } = this.state; return ( <div> {this.renderLibrary()} {this.renderLibraryFirst()} </div> ) } ChangeObjectFirst = (e, i) => { const itemToReplace = this.state.libraryNewJson[i]; console.log(itemToReplace) // It is an array by 3 objects ,because I have 3 pages let { library } = this.state; library = library.map(el => { el['First'] = Object.assign({}, itemToReplace); }); this.setState({ library: library }); //// and By clicking there is this error:TypeError: library[(currentPage - 1)] is undefined } } ReactDOM.render(<App />, document.getElementById('Result')) 是本地的DOMContentLoaded，而它是来自远程服务器的219 ms，我认为带宽并不是真正的问题。

这是请求的瀑布截图。

本地：

远程：

是否有可能使我的前6个连接保持活动状态，并因此导致第6个连接之后的任何连接都停滞不前？