在 reactjs 中获取 api 时如何使用 useState？

Question

我有一个dashboard.js 文件，它应该从firebase 数据库中呈现有关用户的信息。 我想遍历这个获取的数据，找到哪个电子邮件与我的 currentUser.email 状态匹配的用户（有点不是最佳实践）我不知道如何将这个找到的用户分配给一个状态（它无休止地运行）所以我可以渲染整个仪表板所以：名字，用户名，个人资料图片。

img：这就是我在控制台中得到的，并希望它在整个范围内都可以访问
因此，如果您查看此屏幕截图，我希望我的仪表板如下所示：
-电子邮件：newadmin@gmail.com
-名称：乔·布莱克
- 和个人资料图片
这应该是个人资料页面，所以我将添加个人简介和更多内容，我基本上希望这个数据库可以根据我在组件之间传递的电子邮件在这里完全访问，用户通过电子邮件登录

const Dashboard = () => {
    const [error, setError] = useState("");
    const { setcurrentUser, currentUser, logout, email } = useContext(UserProvider);
    const navigate = useNavigate();
    const handleLogOut = async () => {
        setError("");
        try {
            await logout();
            navigate("/login");
        } catch (err) {
            setError(err);
        }
    };
    auth.onAuthStateChanged((currentUser) => {
        if (currentUser) {
            setcurrentUser(currentUser);
        }
    });

    const url = "https://skitter-9e5e3-default-rtdb.europe-west1.firebasedatabase.app/users.json";
    const [emailstate, setEmailstate] = useState();

    const byEmail = async () => {
        const response = await fetch(url);
        const data = await response.json();
        for (let i = 0; i <= Object.keys(data).length; i++) {
            if (data[Object.keys(data)[i]].email == currentUser.email) {
                console.log(data[Object.keys(data)[i]]);
            }
        }
    };

    byEmail();

    return (
        <>
            <Card>
                <Card.Body>
                    <span className="text-center">
                        <strong>Email: {currentUser.email}</strong>
                    </span>
                </Card.Body>
            </Card>
            <div>
                <Button variant="link" onClick={handleLogOut}>
                    Log out
                </Button>
            </div>
        </>
    );
};

export default Dashboard;

Answer 1

使用效果挂钩，以便获取请求只运行一次，而不是每次组件运行时。 您应该对onAuthStateChanged执行相同的操作 - 您只需添加一个侦听器，而不是每次渲染组件时添加一个侦听器。

当您在响应中找到匹配项时，将其设置为状态变量。 在 for 循环中，不要从 0 开始并使用i <= arr.length - 这将比数组的长度多迭代一次。 用i < arr.length在数组的最后一个索引处结束 - 或完全避免手动迭代并改用find 。

const [userData, setUserData] = useState();
useEffect(() => {
    auth.onAuthStateChanged(setcurrentUser);
    const url = "https://skitter-9e5e3-default-rtdb.europe-west1.firebasedatabase.app/users.json";
    fetch(url)
        .then(response => response.json())
        .then((data) => {
            const currentUserObj = Object.values(data).find(obj => obj.email === currentUser?.email);
            if (currentUserObj) {
                setUserData(currentUserObj);
            }
        })
        .catch(handleErrors); // don't forget this part - don't ignore errors
}, []);

然后userData状态将包含来自 API 的对象（如果找到的话）。