javascript - React 编译页面后发生 CORS 错误，但在重新加载页面后它们消失了

Question

React 编译页面后，出现关于 AJAX 请求的错误。它看起来像这样：

从源“http://localhost:3000”访问“https://randomuser.me/api/?format=JSON”的 XMLHttpRequest 已被 CORS 策略阻止

在浏览器中刷新页面后，这些错误消失，内容正常加载。该错误清楚地表明 CORS 策略存在问题，但我有一个 CORS: Access-Control-Allow-Origin 插件，允许我在我的 React 应用程序页面上忽略它们。奇怪的是，这一系列错误最常出现在 React 编译之后……

React 也总是将这个警告返回到控制台：

警告：无法在尚未安装的组件上调用 setState。这是一个无操作，但它可能表明您的应用程序中存在错误。

class ItemList extends React.Component{

        constructor(props){
            super(props);
            
            var Filter = [];
            
            for(var i = 0; i < numberOfItems; i++){
                this.sendRequest(i);
                Filter.push(true);
            }
            
            this.state = { 
                list: [],
                filter: Filter
            };
        }
    
        sendRequest(itemIndex){
            const xhr = new XMLHttpRequest();
            xhr.open("GET", 'https://randomuser.me/api/?format=JSON');
            xhr.setRequestHeader("content-type", "application/json");
            xhr.onreadystatechange = function(){
                if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
                    var List = this.state.list;
                    List[itemIndex] = JSON.parse(xhr.response);
                    
                    this.setState({list: List});
                }
            }.bind(this)
            xhr.send();
        }
    
    render(){
            for(var i = 0; i < numberOfItems; i++)
                if(this.state.list[i] === undefined)
                    return <h1>Sending AJAX requests...</h1>
            
            return(
                <div className="users">
                    <table>
                        <tbody>
                            <tr>
                                <td><h1>Search:</h1></td>
                                <td><input id="firstNameSearch" type="search" onChange={this.nameSearch} /></td>
                                <td />
                                <td />
                            </tr>
                        </tbody>
                    </table>
                    {this.state.list.map((item, i) => <Item 
                        id={i} 
                        key={i}
                        visible={this.state.filter[i]}
                        lastName={JSON.stringify(this.state.list[i].results[0].name.last)}
                        firstName={JSON.stringify(this.state.list[i].results[0].name.first)}
                        userName={JSON.stringify(this.state.list[i].results[0].login.username)}
                        birthday={JSON.stringify(this.state.list[i].results[0].dob.date)}
                        adress={JSON.stringify(this.state.list[i].results[0].location.state)}
                        city={JSON.stringify(this.state.list[i].results[0].location.city)}
                        zipCode={JSON.stringify(this.state.list[i].results[0].location.postcode)}
                        email={JSON.stringify(this.state.list[i].results[0].email)}
                        gender={JSON.stringify(this.state.list[i].results[0].gender)}
                        phone={JSON.stringify(this.state.list[i].results[0].phone)}
                        cell={JSON.stringify(this.state.list[i].results[0].cell)}
                        registred={JSON.stringify(this.state.list[i].results[0].registered.date)}
                        smallPic={JSON.stringify(this.state.list[i].results[0].picture.medium)}
                        bigPic={JSON.stringify(this.state.list[i].results[0].picture.large)}
                    />)}
                </div>
            );
        }
    }

标签： javascriptreactjsajax