Как передать массив для отображения в Flatlist в React Native - PullRequest
0 голосов
/ 12 апреля 2020

У меня проблема с отображением плоского списка в React native. Массив является выводом из листа Google через узел express. Пример массива:

[["Fateh","25"],["Fateh","100"],["Ambuja","140"],["Utcl","50"]]

Что я пробовал до сих пор:

setDoList(() => {
                return [
                  {col1 : responseText[0], col2:responseText[1] ,key: Math.random().toString()}
                ]
              })

Но отступ здесь не работает. Я даже пытался преобразовать массив в JS объекты с помощью {... array}, это не помогло. Я новичок в области JS, пожалуйста, дайте мне направление, чтобы решить эту проблему.

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

На React Родная сторона. Как насчет того, чтобы использовать JSON .parse (data), прежде чем пытаться получить доступ к его свойствам или методам.

Если это строка, вам нужно преобразовать ее в массив объектов с помощью JSON .parse ().

Кроме того, как данные выглядят на node js на стороне сервера, прежде чем отправить его в React Native? Я знаю, что Google листы, как известно, делают некоторые странные вещи

1 голос
/ 12 апреля 2020

Чтобы использовать массив массивов в плоском списке, вы можете сделать что-то вроде этого

export default function App(){    

    const array = ['["Fateh","25"]','["Fateh","100"]','["Ambuja","140"]','["Utcl","50"]'];

      return(
        <View style={styles.div}>
          <FlatList
            data={array}
            renderItem={({ item,index }) => {
                console.log("item is",item);
                var array = JSON.parse(item);
        return(
            <View style={{flexDirection:"row"}}>
            {array.map((item, key) => 
            {
                return(
                <View>
                  <Text> {item} </Text>
                </View>
              )
            })}
            </View>
        )
        } }
            keyExtractor={item => item.id}
          />
        </View>
      );

    }

Вы можете использовать FlatList для каждого, чем вы можете использовать карту внутри него.

enter image description here

Надеюсь, это поможет!

...