将 LocalStorage 中的 JSON 文件解析为 react-native答案

【问题标题】：Parsing JSON file from LocalStorage in to react-native将 LocalStorage 中的 JSON 文件解析为 react-native
【发布时间】：2019-05-13 18:52:06
【问题描述】：

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

【问题讨论】：

我用你的自定义逻辑更新它

标签： javascript json reactjs react-native local-storage

【解决方案1】：

FlatList renderItem 接受 React.Element 而不是多个元素，因此您可以将元素包装在 React.Fragment 中。

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

【讨论】：

我想他想知道如何渲染json文件

【解决方案2】：

嗨，FlatListcomponent 的 data 属性仅接受 array 值。但是您在 info.json 文件中生成了一个 object。你可以试试这样的东西。如果您知道要渲染的 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>
      );
    }
}

【讨论】：