useEffect return 一个空数组

Question

我正在尝试从我的数据库中呈现数据

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import api from '../../Services/api';

function ProviderList(){
  const [provider, setProvider] = useState([]);

  async function loadingProvider(){
    const response = await api.get('providers');
    setProvider(response.data);
    console.log(provider);
  }

  useEffect(() => {
    loadingProvider();
  }, []);
  

  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{provider.name}</Text>   
    </View> 
    
  )
}

export default ProviderList;

当我的页面呈现时，提供程序 console.log 是一个空数组，但是当我保存我的项目并重新加载页面时，返回了数据。我读到这是因为钩子是在第一页渲染后立即渲染的，但是我需要在页面启动时渲染这些数据，我不知道该怎么做。有人可以帮忙吗？

Answer 1

你的错误是日志数据

    setProvider(response.data);
    console.log(provider); //here the error

更新后无法立即记录状态
doc 说

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately. setState() does not always immediately update the component. It may batch or defer the update until later

用于日志监听这样的提供商更改

useEffect(() => {
    console.log(provider); //log will work here
  }, [provider]);

你这里还有一个错误{provider.name}

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{provider.name}</Text> //provider is array not abject
    </View>

这对你有用

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

function ProviderList(){
  const [provider, setProvider] = useState([]);

  async function loadingProvider(){
    const response = {data : [1,2,3,4]}; //replace this with api
    setProvider(response.data);
  }


  useEffect(() => {
    console.log(provider); //log will work here
  }, [provider]);
  

  useEffect(() => {
    loadingProvider();
  }, []);
  

  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>provider length is : {provider.length}</Text>   
    </View> 
    
  )
}

export default ProviderList;

useEffect return 一个空数组

useEffect return an empty array

react-native

use-effect

use-state