时间戳

首页 > 解决方案 > 带有本地 Json 文件的 React-Native Searchable FlatList

react-native - 带有本地 Json 文件的 React-Native Searchable FlatList

问题描述

我正在尝试在隔离期间正在开发的这个新应用程序上创建一个可搜索的平面列表。我在互联网上关注了一篇关于如何创建它的文章，到目前为止我的代码如下所示：

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 数据呈现并出现在平面列表中

标签： react-nativereact-native-flatlist

解决方案

这Fetch API是一个基于 Promise 的 JavaScript API，用于在浏览器中发出异步 HTTP 请求，类似于 XMLHttpRequest。如果要从本地 JSON 文件加载数据。

首先导入该文件

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

然后将导入的值分配给makeRemoteRequest函数内的状态

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

希望这可以帮助你。随意怀疑。

推荐阅读