Jak nazwać zmienną z danymi w reagującej

Question

Coś naprawdę prostego, ale nie zrozumiałem. Po otrzymaniu kontaktów, jak mogę używać ich do wypełnienia listy? Zawsze dostaję Can't find variable: contacts

import * as Contacts from "expo-contacts";

const ContactsScreen = props => {
  useEffect(() => {
    (async () => {
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === "granted") {
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.Emails]
        });

        if (data.length > 0) {
          const contact = data[0];
          console.log(contact);
        }
      }
    })();
  }, []);


  return (
    <View >
      <Text>Contacts Module</Text>
      <FlatList
        data={contact}
        keyExtractor={contact.id}
        renderItem={({ item }) => (
      <ContactItem
        firstName={item.firstName}
      />
    </View>
  );
};

export default ContactsScreen;

Myślę, że to naprawdę proste, po prostu nie rozumiem

react-native

0

Marco Disco 23 marzec 2020, 16:05

Answer 1

Musisz zachować kontakty w stanie komponentu. Tak więc za każdym razem, gdy zmienisz swój stan, Twój komponent będzie się oddać, a zobaczysz zaktualizowane dane. Zmień kod z poniższą. Nie zapomnij zaimportować useState.

import * as Contacts from "expo-contacts";

const ContactsScreen = props => {
  const [myContacts, setMyContacts] = useState([]);

  useEffect(() => {
    (async () => {
      const { status } = await Contacts.requestPermissionsAsync();
      if (status === "granted") {
        const { data } = await Contacts.getContactsAsync({
          fields: [Contacts.Fields.Emails]
        });

        if (data.length > 0) {
          setMyContacts(data);
        }
      }
    })();
  }, []);


  return (
    <View >
      <Text>Contacts Module</Text>
      <FlatList
        data={myContacts}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <Text>{item.firstName}</Text>
        )}
      />
    </View>
  );
};

export default ContactsScreen;

1

aytek 23 marzec 2020, 13:21

Answer 2

Odpowiedz z mojego komentarza:

Myślę, że to może być z zakresu zmiennej, może to być, że rn nie wie, że istnieje, ponieważ istnieje tylko w funkcji. Myślę, że możesz utworzyć stan, a następnie przypisać wartości z kontaktu do stanu iw wywołaniu mieszkaniowym data ={ this.state.contact}.

Lub za pomocą haków takich jak ty:

if (data.length > 0) {
          setContact(data);
        }

I zadzwoń do flatlist:

data={myContact} // if named so in state declaration

1

yesIamFaded 23 marzec 2020, 13:22

Jak nazwać zmienną z danymi w reagującej

2 odpowiedzi

Podobne pytania

Nowe pytania

react-native