Ссылка на массив литерала объектов JavaScript

Лучшая часть в реакции - это состояние, которое вы не используете в компоненте 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>
          );
     }
 }
.
7
задан Adam Bellaire 8 October 2008 в 00:38
поделиться

5 ответов

Структура:

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'] }
        ]}
];

Я записал об обходе и всем остальном здесь.

7
ответ дан 6 December 2019 в 10:55
поделиться

автомобили [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"]
  }
};
6
ответ дан 6 December 2019 в 10:55
поделиться

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): уборка кода во втором примере]

3
ответ дан 6 December 2019 в 10:55
поделиться

На вашем месте я не смешал бы все Ваши данные в один большой многомерный массив / путаница литерала объектов как этот. Я инкапсулировал бы каждый объект и методы использования для доступа к данным. Это смешает с Вашим мозгом намного меньше.

0
ответ дан 6 December 2019 в 10:55
поделиться

Можно пересечь модели с этим кодом:

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 к его формату.

2
ответ дан 6 December 2019 в 10:55
поделиться
Другие вопросы по тегам:

Похожие вопросы: