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

Question

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

文件1：（返回方法将通过映射它们来渲染

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 的返回（渲染）方法中，每当添加新照片时，它都不会给出更新的结果（我需要注销并重新登录才能看到更改）。我该如何解决它？

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

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}

一般来说，每次你想导入函数、数组、对象等时，它应该看起来像这样：

文件1：

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

export {func}

文件2：

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

func() //now you can use the function 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 文件，在其中实现所有 fetches 功能，我通常将此文件称为 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;