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>
);
}
}