-2

The search works fine but after search something can't get the information back. I'm using Coingecko API with axios. Can someone help me with this please?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

My App.js:

import React, { useRef, useMemo, useState, useEffect } from "react";
import { StyleSheet, Text, View, SafeAreaView, TextInput } from "react-native";
import ListItem from "./components/ListItem";
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from "@gorhom/bottom-sheet";
import { SAMPLE_DATA } from "./assets/data/sampleData";
import {
  FlatList,
  GestureHandlerRootView,
  gestureHandlerRootHOC,
} from "react-native-gesture-handler";
import Chart from "./components/Chart";
import { getMarketData } from "./services/cryptoService";

const ListHeader = () => (
  <>
    <View style={styles.titleWrapper}>
      <Text style={styles.largeTitle}>Markets</Text>
    </View>
    <View style={styles.divider} />
  </>
);

export default function App() {
  const [data, setData] = useState([]);
  const [selectedCoidData, setSelectedCoinData] = useState(null);
  const [searchText, setSearchText] = useState("");

  useEffect(() => {
    const fetchMarketData = async () => {
      const marketData = await getMarketData();
      setData(marketData);
    };
    fetchMarketData();
  }, []);

  //Change text logic (problem => not get the data back)
  useEffect(() => {
    if (searchText === "") {
      setData(data);
    } else {
      setData(
        data.filter(
          (item) =>
            item.id.toLowerCase().indexOf(searchText.toLocaleLowerCase()) > -1
        )
      );
    }
  }, [searchText]);

  // ref
  const bottomSheetModalRef = useRef(null);

  // variables
  const snapPoints = useMemo(() => ["50%"], []);

  const openModal = (item) => {
    setSelectedCoinData(item);
    bottomSheetModalRef.current.present();
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <SafeAreaView style={styles.container}>
          <ListHeader />
          <TextInput
            style={styles.input}
            placeholder="Search for some crypto"
            placeholderTextColor="#C5C5C5"
            value={searchText}
            onChangeText={(t) => setSearchText(t)}
          />
          <FlatList
            keyExtractor={(item) => item.id}
            data={data}
            renderItem={({ item }) => (
              <ListItem
                name={item.name}
                symbol={item.symbol}
                currentPrice={item.current_price}
                priceChangePercentage7d={
                  item.price_change_percentage_7d_in_currency
                }
                logoUrl={item.image}
                onPress={() => openModal(item)}
              />
            )}
          />
        </SafeAreaView>
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={0}
          snapPoints={snapPoints}
          style={styles.bottomSheet}
        >
          {selectedCoidData ? (
            <Chart
              currentPrice={selectedCoidData.current_price}
              logoUrl={selectedCoidData.image}
              name={selectedCoidData.name}
              symbol={selectedCoidData.symbol}
              priceChangePercentage7d={
                selectedCoidData.price_change_percentage_7d_in_currency
              }
              sparkline={selectedCoidData.sparkline_in_7d.price}
            />
          ) : null}
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  titleWrapper: {
    marginTop: 40,
    paddingHorizontal: 16,
  },
  largeTitle: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
  },
  // divider: {
  //   height: StyleSheet.hairlineWidth,
  //   backgroundColor: "#C5C5C5",
  //   marginHorizontal: 16,
  //   marginTop: 16,
  // },
  bottomSheet: {
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: -10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 40,
    elevation: 10,
    backgroundColor: "white",
  },
  input: {
    marginTop: 20,
    backgroundColor: "#F6F6F6",
    padding: 16,
    fontSize: 16,
  },
});

cryptoService.js :

import axios from "axios";
import moment from "moment";

const formatSparkLine = (numbers) => {
  const sevenDaysAgo = moment().subtract(7, "days").unix();
  let formattedSparkline = numbers.map((item, index) => {
    return {
      x: sevenDaysAgo + (index + 1) * 3600,
      y: item,
    };
  });

  return formattedSparkline;
};

const formatMarketData = (data) => {
  let formattedData = [];

  data.forEach((item) => {
    const formattedSparkline = formatSparkLine(item.sparkline_in_7d.price);

    const formattedItem = {
      ...item,
      sparkline_in_7d: {
        price: formattedSparkline,
      },
    };

    formattedData.push(formattedItem);
  });
  return formattedData;
};

export const getMarketData = async () => {
  try {
    const response = await axios.get(
      "https://api.coingecko.com/api/v3/coins/markets?vs_currency=brl&order=market_cap_desc&per_page=20&page=1&sparkline=true&price_change_percentage=7d"
    );
    const data = response.data;
    const formattedResponse = formatMarketData(data);
    return formattedResponse;
  } catch (error) {
    console.log(error.message);
  }
};

1 Resposta 1

-2

SOLVED! add this function insted using the useEffect:

 function search(s) {
    let arr = JSON.parse(JSON.stringify(originalData));
    setData(
      arr.filter((d) => d.id.toLowerCase().includes(s.toLocaleLowerCase()))
    );
  }

And put in the textinput like that:

<TextInput
    style={styles.input}
    placeholder="Search for some crypto"
    placeholderTextColor="#C5C5C5"
    onChangeText={(s) => search(s)}
/>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .