React-Native с возможностью поиска FlatList с локальным Json файлом - PullRequest
Новая
       64

React-Native с возможностью поиска FlatList с локальным Json файлом

0 голосов
/ 03 мая 2020

Я пытаюсь создать доступный для поиска плоский список для этого нового приложения, над которым я работал над карантином. Я следовал за статьей inte rnet о том, как ее создать, и мой код до сих пор выглядит так: 

import React, { Component } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { ListItem, SearchBar } from 'react-native-elements';

class FlatListDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
    };

    this.arrayholder = [];
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://randomuser.me/api/?&results=20`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.results,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.results;
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '14%',
        }}
      />
    );
  };

  searchFilterFunction = text => {
    this.setState({
      value: text,
    });

    const newData = this.arrayholder.filter(item => {
      const itemData = `${item.name.title.toUpperCase()} ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type Here..."
        lightTheme
        round
        onChangeText={text => this.searchFilterFunction(text)}
        autoCorrect={false}
        value={this.state.value}
      />
    );
  };

  render() {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              leftAvatar={{ source: { uri: item.picture.thumbnail } }}
              title={`${item.name.first} ${item.name.last}`}
              subtitle={item.email}
            />
          )}
          keyExtractor={item => item.email}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default FlatListDemo;

Это работает и все, но как я мог изменить функцию makeRemoteRequest так, чтобы я получил данные из локального json файла вместо URL? Например: 

  makeRemoteRequest = () => {
    const url = `../data/userData.json`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.results,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.results;
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

Я попытался это сделать безуспешно, поскольку ни один из данных json не отображался и не отображался в плоском списке

1 Ответ

0 голосов
/ 03 мая 2020

Fetch API - это основанный на обещаниях API JavaScript для выполнения асинхронных HTTP-запросов в браузере, аналогичный XMLHttpRequest. Если вы хотите загрузить данные из локального файла JSON.

Сначала импортируйте этот файл 

import Data from '../data/userData.json'

Затем назначьте импортированное значение вашему состоянию в вашей makeRemoteRequest функции 

makeRemoteRequest = () => {
  this.setState({
    data: Data,
  });
}

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

...