תרגיל 1.
הגעתי לפתרון שאני לא כל כך מרוצה מימנו.
הערונת, הכתובת היא עם HTTPS ולא HTTP.
שאלה, האם ניתן לעבוד ב CODEPAN עם async \ await? קבלתי שגיאת ולא ידעתי איך להוסיף את הרפרנסים הרלוונטיים.
מה שאני לא אוהב בפתרון ועדיין לא התגברתי עליו, זה שאם אני מבצע את GET כבר ב CTOR הראשון, אז משום מה ה CTOR מופעל פעמיים ואני מקבל שגיאות.`
class DataPresentation extends React.Component
{
click = (e) => {
this.props.selectAttribute(e);
}
render()
{
if (this.props.data == undefined) return <div/>;
const attributes = this.props.data[this.props.childAttribute].map((data,index) =>
<AttributeLink key={index} name={data} clicked={this.click} />);
return <span>
<div>{this.props.data[this.props.displayAttribute]}</div>
<div>{attributes}</div>
</span>;
}
}
function AttributeLink(props)
{
return <div>
<button onClick={(e) => props.clicked(props.name)}>{props.name}</button>
</div>
}
class App extends React.Component
{
constructor(props)
{
super(props);
const firstPerson = this.getFirstPerson();
//getData('https://swapi.co/api/people/1/');
this.state = {presentedData : firstPerson,
isPerson:true};
}
selectAttribute = (url) => {
this.getData(url);
}
getData = (url) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.addEventListener('load', () => {
const results = JSON.parse(xhr.responseText);
this.setState(oldstate => ({presentedData: results,
isPerson: !oldstate.isPerson}));
});
xhr.send();
}
render()
{
return <div>
<DataPresentation
data={this.state.presentedData}
childAttribute={this.state.isPerson ? 'films' : 'characters'}
displayAttribute={this.state.isPerson ? 'name' : 'title'}
selectAttribute={this.selectAttribute} />
</div>;
}
/*
getPerson = async () => {
const res = await $.getJSON('http://swapi.co/api/people/1/');
this.stateState(oldState => ({person : res.Search}));
}
*/
getFirstPerson = () => {
return {
"name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",
"films": [
"https://swapi.co/api/films/2/",
"https://swapi.co/api/films/6/",
"https://swapi.co/api/films/3/",
"https://swapi.co/api/films/1/",
"https://swapi.co/api/films/7/"
],
"species": [
"https://swapi.co/api/species/1/"
],
"vehicles": [
"https://swapi.co/api/vehicles/14/",
"https://swapi.co/api/vehicles/30/"
],
"starships": [
"https://swapi.co/api/starships/12/",
"https://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "https://swapi.co/api/people/1/"
};
}
}
ReactDOM.render(<App />, document.getElementById('root'));
