javascript - 将 JSON 文件从 LocalStorage 解析为 react-native

Question

我一直在尝试从我的本地 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)"}
  ]
}

Answer 1

您好，FlatList 组件的 data 属性只接受值的数组。但是您正在 info.json 文件中生成一个对象。你可以尝试这样的事情。如果您知道要呈现的 json 文件的属性名称就足够了。

我创建了一个 minimal Expo example您可以在哪里看到它的工作原理。

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>
      );
    }
}