1

After React compiles the page, there are errors about AJAX requests. It looks like this:

Access to XMLHttpRequest at 'https://randomuser.me/api/?format=JSON' from origin 'http: // localhost: 3000' has been blocked by CORS policy

After refreshing the page in the browser, these errors disappear and the content loads normally. The error clearly states that there are problems with CORS policies, but I have a CORS: Access-Control-Allow-Origin plugin that allows me to ignore them on the page of my React application. It's strange that this series of errors occurs most often after React compilation ...

Also React always returns this Warning to the console:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application.

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>
            );
        }
    }
  • The answer to your first question is: because your CORS plugin works in unexpected ways, unrelated to the code or anything we can do. – luk2302 Feb 14 '21 at 12:43

0 Answers0