Лучшая часть в реакции - это состояние, которое вы не используете в компоненте MovieDescription, поэтому перемещайте переменные data и data1 в состояние компонента, чтобы при каждом выполнении setState компонент отображался с обновленными данными. С вашим текущим кодом компонента MovieDescription, хотя вы и получаете вызовы, присваиваете данные переменным, вы не будете визуализировать компонент, потому что вы переопределяете переменную, чтобы он не вызывал перерисовку.
Также используйте componentDidMount вместо метода componentWillMount. Как вы знаете, componentWillMount устарел в реакции версии 16.
Вот обновленный код компонента MovieDescription
class MovieDescription extends React.Component {
constructor(props){
super(props);
this.state = {
data:{},
data1: {}
}
}
componentDidMount() {
fetch(`https://api.themoviedb.org/3/movie/${this.props.id}?api_key=${api_key}&language=en-US`)
.then(response => response.json())
.then(json => {
this.setState({data : json});
});
fetch(`https://api.themoviedb.org/3/movie/${this.props.id}/credits?api_key=${api_key}`)
.then(response => response.json())
.then(json => {
this.setState({data1: json});
});
}
componentWillUpdate() {
fetch(`https://api.themoviedb.org/3/movie/${this.props.id}?api_key=${api_key}&language=en-US`)
.then(response => response.json())
.then(json => {
this.setState({data : json});
});
fetch(`https://api.themoviedb.org/3/movie/${this.props.id}/credits?api_key=${api_key}`)
.then(response => response.json())
.then(json => {
this.setState({data1 :json});
});
}
render() {
return(
<div>{data.overview}</div>
<div>{data.runtime}</div>
);
}
}
. Структура:
var cars = [
{ name: 'Honda', models: [
{ name: 'Accord', features: ['2dr', '4dr'] },
{ name: 'CRV', features: ['2dr', 'Hatchback'] },
{ name: 'Pilot', features: ['base', 'superDuper'] }
]},
{ name: 'Toyota', models: [
{ name: 'Prius', features: ['green', 'superGreen'] },
{ name: 'Camry', features: ['sporty', 'square'] },
{ name: 'Corolla', features: ['cheap', 'superFly'] }
]}
];
Я записал об обходе и всем остальном здесь.
автомобили [0] .models. Автомобили соглашения [0] .models. Автомобили CRV [0] .models. Пилот (См. ответ olliej),
Хотя, может быть легче использовать следующее понятие доступа:
cars.Honda.Accord
cars.Toyota.Prius
... использование...
var cars = {
Honda : {
Accord : ["2dr", "4dr"],
CRV : ["2dr", "Hatchback"],
Pilot : ["base", "superDuper"]
},
Toyota : {
Prius : ["green", "reallyGreen"],
Camry : ["sporty", "square"],
Corolla : ["cheap", "superFly"]
}
};
Jonathan корректен, но он пропустил дополнительный уровень Массива на образцовом уровне, таким образом, это должно быть
cars[0].models[0].Accord
cars[0].models[1].CRV
и т.д.
Я подозреваю, что Вы нашли бы легче использовать структуру вроде:
var cars = [
{makes : "Honda",
models : {
Accord : ["2dr","4dr"],
CRV : ["2dr","Hatchback"],
Pilot: ["base","superDuper"]
}
},
{makes :"Toyota",
models : {
Prius : ["green","reallyGreen"],
Camry : ["sporty","square"],
Corolla : ["cheap","superFly"]
}
}];
В котором models
массив заменяется объектом (или ассоциативный массив, если Вам нравится),
[редактирование (olliej): уборка кода во втором примере]
На вашем месте я не смешал бы все Ваши данные в один большой многомерный массив / путаница литерала объектов как этот. Я инкапсулировал бы каждый объект и методы использования для доступа к данным. Это смешает с Вашим мозгом намного меньше.
Можно пересечь модели с этим кодом:
for (var i = 0, carslen = cars.length; i < carslen; i++) { for (var j = 0, modelslen = cars[i].models.length; j < modelslen; j++) { // do something with cars[i].models[j] } }
но я соглашаюсь с Olliej об изменении структуры Вашего JSON к его формату.