React 从另一个文件调用函数并使用 Effect

Question

你好，每当对数据库调用更新时，我都试图从数据库中呈现更新的内容。我找到但现在我的“添加”方法与链接问题中的“获取”方法不在同一个文件中。我尝试了以下方法，但仍然无法正常工作：

文件 1：（return 方法将通过映射呈现 UploadedImages）

const [UploadedImages,setUploadedImages] = useState([])

const fetchUserAllPhotos = async () => {
    const res = await client.get('/get-photos')
        setUploadedImages(res.data.photoList)
    } 

useEffect(()=>{
        
    fetchUserAllPhotos()
},[])

文件 2：

import {fetchUserAllPhotos} from './Gallery/AllPhotos';
const addNewPhoto = async () => {
        if (success) {
            await fetchUserAllPhotos()
        }
}

但是在文件 1 的 return（渲染）方法中，无论何时添加新照片，它都不会提供更新的结果（我需要注销并重新登录才能看到更改）。我该如何解决？

如果函数被包裹在另一个函数中怎么办？

export default function PhotoGrid(props){
    const [UploadedImages,setUploadedImages] = useState([])
    
    const fetchUserAllPhotos = async () => {
        const res = await client.get('/get-photos')
            setUploadedImages(res.data.photoList)
        } 
    
    useEffect(()=>{
            
        fetchUserAllPhotos()
    },[])

}

Answer 1

您需要在文件 1 的底部添加这一行

export {fetchUserAllPhotos}

一般来说，每次要导入函数、数组、对象等时，它应该如下所示：

文件 1:

const func = () => {
  //implementaion of the function
}

export {func}

文件 2:

import {func} from './file1' //you need to give the path of file1


func() //now you can use the fanction everywhere in file2

注意：您可以导出任意数量的函数，但请注意在导出和导入中使用相同的名称很重要

export {func1, func2, func3, obj1, abj2, arr1, arr2}

如果要从 React 组件导出函数，则需要在组件外部定义函数

const func = () => {

}

export default function MyReactComponent(prop) {
//implementation of your component
}

export {func}

如果您需要在函数中使用组件的 prop，您可以将此 prop 作为函数参数传递。

我建议避免从 React 组件中导出函数，因为当你的项目变大时，你会开始发现你是否实现了每个功能。相反，最好的做法是添加一个新的 js 文件，你在那里实现了所有的提取功能，我通常称这个文件为 api.js 这个文件看起来应该是这样的（我从我的项目中获取了这段代码，我使用 axios 来获取服务器）：

import axios from "axios"

const url = 'http://localhost:8080'

const api = {
getQuestions : async () => {
   return axios.get(`${url}/question/all`)
 },
getQuestionById : async (id) => {
   return axios.get(`${url}/question/${id}`)
 }
}

export default api;

React 从另一个文件调用函数并使用 Effect

React Calling function from another file and useEffect

javascript

asynchronous

reactjs

react-native