После React компиляции страницы появляется ошибки о AJAX запросах которые запрашивают JSON объекты. Выглядит она вот так:
Access to XMLHttpRequest at 'https://randomuser.me/api/?format=JSON' from origin 'http://localhost:3000' has been blocked by CORS policy
После обновления страницы в браузере эти ошибки пропадают и контент загружается нормально. В ошибке явно указывается что присутствуют проблемы с CORS политиками однако у меня стоит плагин CORS: Access-Control-Allow-Origin, который позволяет игнорировать их на странице моего React приложения. Странно что этот ряд ошибок возникает чаще всего после компиляции...
Также React всегда возвращает этот Warning в консоль:
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 jsonList = [];
var Filter = [];
jsonList.length = numberOfItems;
for(var i = 0; i < numberOfItems; i++){
this.sendRequest(i);
Filter.push(true);
}
this.state = {
list: jsonList,
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>
);
}
}