如何从 React Native 中的功能组件正确调用函数？

Question

可能是一个新手问题，但我是 React Native 的初学者，很难理解如何从函数组件调用我的 return 方法中的函数。如果我在 searchUser 函数中返回任何内容，它不会在我的屏幕上输出。您能帮我理解如何正确调用此函数并返回其中的组件吗？我显然有一个更大的功能，我试图通过让用户使用此功能进行搜索来完成，但我至少想了解如何首先正确调用一个函数并将其中的组件输出到我的屏幕上。

  const Map = ({navigation}) => {

    //used to search 
    const searchUser = async () => {
        return <Text> hello </Text>
    }

  return (
      <Container>
        <ScrollView>
            <Text style = {styles.titleStyle}> Map </Text>
            <List>
               {searchUser()}
            </List>
        </ScrollView>
      </Container>
  );
}

Answer 1

您的函数将不渲染任何内容，因为它返回一个 Promise 而不是一个组件。

您需要使用诸如useState 和useEffect 之类的钩子来实现您的searchUser。

import React, {useState, useEffect} from 'react'
 
  //used to search 
    const searchUser = async () => {
        return  {} // fetch data
    }
 
 const Map = ({navigation}) => {

function MyComponent({data}) {

  return(
    <Text>{data}</Texte>
  )
}

  const [result, setResult] = useState({})
  
  useEffect( async () => { // async declaration because we use await
  
  // call all your fetch
  const data = await searchUser()
  
  setResult(data);
  
  });
   

  return (
      <Container>
        <ScrollView>
            <Text style = {styles.titleStyle}> Map </Text>
            <MyComponent data={result} /> // call your component to show
        </ScrollView>
      </Container>
  );
}