React 从另一个文件调用 function 并使用 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 的返回（渲染）方法中，每当添加新照片时，它都不会给出更新的结果（我需要注销并重新登录才能看到更改）。 请问我go怎么解决呢？

如果 function 被包裹在另一个里面怎么办？

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

你需要在 file1 的底部添加这一行

export {fetchUserAllPhotos}

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

文件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 组件导出 function，则需要在组件外部定义 function

const func = () => {

}

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

export {func}

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

我建议避免从 React 组件中导出 function，因为当你的项目变大时，如果你隐含了每个功能，就会开始感到沮丧。 相反，最好的做法是添加一个新的 js 文件，你在那里实现了所有的提取 function，我通常称这个文件为 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;