Question

可能是一个新问题，但我是 React Native 的初学者，我很难理解如何从函数组件调用返回方法中的函数。如果我在 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>
  );
}

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

1 个答案: