useState setmethod 在 useEffect 内部更新，但不反映外部结果

Question

我试图使用react-native-contacts 库在应用程序中显示我的联系人。当我执行console.log 时，我能够建立连接并且每个人的名字都是可见的。 我已经创建了这个 usestate 钩子

let [con,setContacts] = useState([])

我想要的是像这样将所有名称以及索引添加到这个数组中

{name:"adi",index:"1"}

我也在 useEffect 钩子中执行此操作，但问题是当我调用 console.log(con.length) 时，它打印的总值是 243。当我在 useEffect 之外调用相同的方法时，它显示 1。看起来usestate 没有在外面更新。

代码::

import React, {useState, useEffect} from 'react';

// Import all required component
import {
  PermissionsAndroid,
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  FlatList,
  TextInput,
} from 'react-native';

import Contacts from 'react-native-contacts';

const ContactScreen = function(){

  let [con, setContacts] = useState([]);
  //console.log("after usestate")
  useEffect(()=>{
    PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
      {
        'title': 'Contacts',
        'message': 'This app would like to view your contacts.',
        'buttonPositive': 'Please accept bare mortal'
      }
    )
    Contacts.getAll().then(contacts => {
      // contacts returned
      console.log("heyyyyyy===================")
      contacts.map((item,index)=>{
        //console.log(item.displayName)
        let nobj={name:item.displayName,index:index}
        //console.log(nobj)
        let arr=con.push(nobj)
        //console.log(arr)
        setContacts([arr])
        console.log(con.length);
        //console.log(con);
        console.log("=================================================");
      })
    })
  },[])
  //issue ==>> displays 1
  console.log(con.length);
 
    return(
        <View style={style.container}>
            <Text>
                this is contact screen
            </Text>
            <Text>{con.length}</Text>
            
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        flex:1,
        margin:10,
        backgroundColor: '#ebebeb'
      }
})

export default ContactScreen;

输出：

输出显示状态正在更新内部使用效果

Answer 1

您好，首先您应该将联系人映射到您设计的表单中。之后，当它被映射时，只需将联系人数组设置在一行中。查看我的以下解决方案。

import React, {useState, useEffect} from 'react';

// Import all required component
import {
  PermissionsAndroid,
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  FlatList,
  TextInput,
} from 'react-native';

import Contacts from 'react-native-contacts';

const ContactScreen = function(){

  let [con, setContacts] = useState([]);
  //console.log("after usestate")
  useEffect(()=>{
    PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
      {
        'title': 'Contacts',
        'message': 'This app would like to view your contacts.',
        'buttonPositive': 'Please accept bare mortal'
      }
    )
    Contacts.getAll().then(contacts => {
      // contacts returned
     const modififiedContacts = contacts.map((item,index)=>{
         return {name:item.displayName,index:index}
      });
     setContacts(modifiedContacts);
    })
  },[])
  //issue ==>> displays 1
  console.log(con.length);
 
    return(
        <View style={style.container}>
            <Text>
                this is contact screen
            </Text>
            <Text>{con.length}</Text>
            
        </View>
    )
}

const style = StyleSheet.create({
    container: {
        flex:1,
        margin:10,
        backgroundColor: '#ebebeb'
      }
})

export default ContactScreen;