Разбор файла JSON из LocalStorage в реагирующий - PullRequest
Новая
       20

Разбор файла JSON из LocalStorage в реагирующий

0 голосов
/ 12 декабря 2018

Я пытался извлечь данные из моего локального файла JSON, но безуспешно.Я перепробовал почти все, но это не работает.Я что-то упускаю или просто не правильно делаю?Я буду очень рад, если кто-то может решить мою проблему.Обычно в диспетчере ошибок отображается ошибка: [ts] У выражений JSX должен быть один родительский элемент [2657] , но не показано, в какой строке проблема.

HistoryScreen.js 

const Page = ({
      fromLeft,
      type,
      parallaxOn,
      flipSide,
      nextType,
      openDrawer,
    }) => (

      <View style={styles.page}>
        <RectButton style={styles.rectButton} onPress={openDrawer}>
            <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                <FlatList 
                  data={this.state.dataSource}
                  renderItem = { ( {item}) => {
                return( 
                  <View style={{width: 60}}>
                    <Avatar

                      style={{flex: 0}}
                      size='large'
                      rounded
                      activeOpacity={0.7}
                      source={require('../components/avatars/club1.png')} />
                </View>
                <View>
                  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                      <View style={styles.rectButtonText}><Text>{item.name}</Text></View>
                      <View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
                  </View>
                  <Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
                </View>
                    )
        }}
        keyExtractor = {(item, index) => index.toString()}
        />
        </View>
        </RectButton>

HistoryScreen.js 

  export default class History extends Component {
  constructor(props){
    super(props);

    this.state = {
      isLoading: true, // check if json data (online) is fetching
      dataSource: [], // store an object of json data
    };
  }

  componentDidMount(){
      // set state value
      this.setState({
        isLoading: false , // already loading
        dataSoure : data.info
      });
  }

и вот мой JSONфайл info.json 

{
"info-club" : [
    {"name" : "Club-Defense Veterans" , "info" : "Pistolet , Carabine..." , "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
    {"name" : "Club-Reflex Shooting" , "info" :  "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
    {"name" : "Club-Super Shooting" , "info" : "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"}
  ]
}

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Привет data опора FlatList компонента принимает только массив значений.Но вы генерируете объект в вашем файле info.json.Вы могли бы попытаться успокоиться, как это.Этого должно быть достаточно, если вы знаете имя свойства файла json, который вы пытаетесь визуализировать.

Я создал минимальный пример Expo , где вы могли видеть, что он работает. 

import * as React from 'react';
import { 
  View, 
  StyleSheet, 
  TextInput,
  Dimensions,
  FlatList
} from 'react-native';

export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state={
      data: require('./info.json') // load the file
    }
  }

  render() {
      const { data } = this.state   // state in a local const
      return (
          <View style={styles.container}>   
          <FlatList 
             data={data['info-club']}    // info-club prop of the json object
             keyExtractor={(item, index) => index.toString()}
             renderItem={ ({item, index}) => {

               // you custom logic here

               return (
                  <View>   { /*   I think you are missing that View Tag */}
                     <View style={{width: 60}}>
                         <Avatar
                           style={{flex: 0}}
                           size='large'
                           rounded
                           activeOpacity={0.7}
                           source={require('../components/avatars/club1.png')}
                         />
                     </View>
                     <View>
                        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                            <View style={styles.rectButtonText}><Text>{item.name}</Text></View>
                            <View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
                         </View>
                         <Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
                       </View>
                  </View>
                )
             }}
          >  
         </FlatList>         
          </View>
      );
    }
}
0 голосов
/ 12 декабря 2018

FlatList renderItem принимает React.Element, а не несколько элементов, поэтому вы можете обернуть свои элементы в React.Fragment. 

renderItem = { ( {item}) => {
  <React.Fragment> 
     {..// Rest of your Code}
  </React.Fragment>
}
...