如何将useEffect中定义的函数传递给reactjs中的子组件？

问题描述

Here我了解到，由于fetcProjects常量，需要将useEffect()函数移到filter内部。说得通。但是因此我无法在我的AddProject组件中使用该函数。我得到'fetchProjects' is not defined。

我将在useEffect()之外重新定义函数，但这对我来说没有必要，要对其进行两次定义。

import React,{ useState,useEffect } from 'react'
import axios from 'axios'
import '../sass/Projects.sass'
import ProjectsList from './ProjectsList'
import Search from './Search'
import AddProject from './AddProject'

function Projects() {

    const [isLoading,setIsLoading] = useState(true)
    const [projects,setProjects] = useState([])
    const [filter,setFilter] = useState('')

    useEffect(() => {
        const fetchProjects = async () => {
            try {
                const result = await axios(`/api/projects?name=${filter}`)
                setProjects(result.data.data)
                setIsLoading(false)
            } catch (error) {
                console.log(error);
            }
        }
        fetchProjects();
    },[filter]);

    return (
        <div className="container">
            <Search getFilter={(f) => setFilter(f)} />
            <AddProject fetchProjects={fetchProjects} />
            <p>&nbsp;</p>
            <ProjectsList projects={projects} isLoading={isLoading} />
        </div>
    )
}

export default Projects;

解决方法

我认为您可以在useEffect之外定义fetchProjects并将过滤器常量作为回调的参数传递给它，就像这样

useEffect(() => fetchProjects(filter),[filter])

尝试一下，让我知道它是否有效

编辑：看来您出于最佳实践的原因而执行此操作，在这种情况下（假设您已对此进行设置），您需要找到一种可根据您的规则运行的方法，例如就像在子组件内部简单定义一个功能一样。

,

您至少有三个 doh！四个选项：

1. 将功能置于状态或ref中。 （糟糕）（请注意，必须将其置于状态中，然后将其包装在一个对象中，否则状态设置器会感到困惑并尝试调用它。）

2. 避免在useEffect回调中定义函数。 （从技术上讲，使用setFilter(filter => /*...*/)是可行的，但这也很麻烦。）

3. 使用useMemo代替useEffect。

4. 对该函数进行参数化，使其接受 filter作为参数，而不是像fesieg shows in their answer那样将其关闭。

其中＃3和＃4似乎是您最好的选择。这是＃3的样子：

function Projects() {

    const [isLoading,setIsLoading] = useState(true);
    const [projects,setProjects] = useState([]);
    const [filter,setFilter] = useState('');

    const fetchProjects = useMemo(
        () => {
            const fetchProjects = async () => {
                try {
                    const result = await axios(`/api/projects?name=${filter}`);
                    setProjects(result.data.data);
                    setIsLoading(false);
                } catch (error) {
                    console.log(error);
                }
            };
            fetchProjects();
            return fetchProjects;
        },[filter]
    );

    fetchProjects();

    return (
        <div className="container">
            <Search getFilter={(f) => setFilter(f)} />
            <AddProject fetchProjects={fetchProjects} />
            <p>&nbsp;</p>
            <ProjectsList projects={projects} isLoading={isLoading} />
        </div>
    )
}

只要fetchProjects发生更改，（大多数情况下）就不会重新创建filter。 （useMemo可以运行创建回调，即使依赖项没有改变，但通常不会改变。）

这是fesieg mentioned的＃4的更完整示例。通过将设置器传递给fetchProjects，将其移出组件：

const fetchProjects = async (filter,setProjects,setIsLoading) => {
    try {
        const result = await axios(`/api/projects?name=${filter}`);
        setProjects(result.data.data);
        setIsLoading(false);
    } catch (error) {
        // *** You probably want to setIsLoading(false) here...?
        // And probably show the user that an error occurred.
        console.log(error);
    }
};

function Projects() {

    const [isLoading,setFilter] = useState('');

    useEffect(() => {
        fetchProjects(filter,setIsLoading);
    },[filter]);

    return (
        <div className="container">
            <Search getFilter={(f) => setFilter(f)} />
            <AddProject fetchProjects={() => fetchProjects(filter,setIsLoading)} />
            <p>&nbsp;</p>
            <ProjectsList projects={projects} isLoading={isLoading} />
        </div>
    );
}