Блог

Главная - Вопросы по программированию - Ошибка: создание каждого цикла

Ошибка: создание каждого цикла

#javascript #react-native

#javascript #реагировать — родной

Вопрос:

Я пытаюсь отобразить JSON, показанный по ссылке ниже:

https://api.myjson.com/bins/ur1k

Когда я перебираю его:

 renderList(data) {
var num = Math.floor(Math.random() * 2000);
return(
data.map((singleData) => {
  return Object.keys(singleData).map((key) => {
    return(
      <View style={styles.row}>
        <Text>{key}- {singleData[key]}</Text>
      </View>
      )
  })
})
)
}

…

 row: {
 flexDirection: 'row',
 height: 60,
 borderBottomWidth: 1,
 borderColor: 'black',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 20
}

…

 constructor(props){
  super(props);
  this.state = {
    data: [],
  }
}

componentWillMount(){
  api.getIsisData().then((response) =>{
    this.setState({
      data: response.result.data,
      key: '',
      values: []
    })
  })
}

Симулятор работает так, как показано на рисунке ниже:
введите описание изображения здесь

Но я бы хотел отобразить, как показано ниже:

введите описание изображения здесь

Где я ошибаюсь в цикле?

Комментарии:

1. Что вы имеете в виду, говоря «как форматируется JSON» ?

2. покажите нам пример того, как вы хотите, чтобы мы его отображали

3. @AKADER пример в описании. Спасибо, братан

4. Чтобы получить материал в формате «json», верните коллекцию объектов как есть. Set content-type=»application/json»

5. @celerno я думаю, что я неправильно объяснил. Я бы хотел отобразить этот путь в нижней части описания.

Ответ №1:

Мой ответ

Я только что создал массив ‘rows’ для получения каждой строки каждого объекта и отображения в представлении.

 renderList(data) {
  var num = Math.floor(Math.random() * 2000);
  return(
    data.map((singleData) => {
      var rows = []
      Object.keys(singleData).map((key,index) => {
        rows.push(<Text>{key} - {singleData[key]}</Text>)
      })
      return(
        <View style={styles.row}>
          {rows}
        </View>
      )
    })
  )
}

Ответ №2:

         for(var i =0;i < result.data.length;i  ) {
       for(var key in result.data[i]{
             //do somethying with key}
    }
}

вы можете добавить его к переменной состояния и поместить все это в форматированный <View>

Комментарии:

1. Как я могу получить переменную в react, используя for , как я использовал с map() или лучше, как я могу добавить ее в переменную состояния?

2. setState будет находиться внутри ‘for’?

3. Вам нужно начать заново. Найдите время, чтобы посмотреть, как работает состояние в React

4. @RaphaelOnofre Помещение setState() внутри цикла for — очень плохая идея. Как и предложил АКАДЕР, найдите время, чтобы прочитать, как работает состояние, а также прочитать о жизненном цикле компонента.

5. @Giorgos у этого приложения есть один экран, на котором он будет смонтирован на componentWillMount(), а затем отображен. Я устанавливаю там состояние. Я обновил описание проблемы с помощью state и componentWillMount() .