javascript - 如何在 React 中访问 if 语句中的常量
问题描述
我正在使用反应/redux。我从我的数据库中引入一个数组并将其设置为我的 redux 状态之一。在我的一个组件内部,我正在过滤该数组以创建一个新数组。但在我这样做之前,我必须检查是否已加载 redux 状态,以便我尝试过滤的数组不会显示为“null”。作为一种解决方案,我使用 if 语句来检查状态是否已加载。if 语句中的新过滤数组是有效的并返回我想要的(因为我在 if 语句中记录了它)。但是,我无法访问新的过滤数组,因为它在 if 语句中......我该如何解决这个问题?
我试过的:
- 使用 useState 创建一个空状态并将新数组设置为状态。问题:我收到重新渲染错误,因为新状态强制重新渲染组件,该组件再次通过 if 语句,再次重新渲染状态......重复......
我的替代解决方案:我可以通过我的操作文件传递我的 redux 状态以进行调节,这样我就可以在那里过滤而不是我的组件。但我确信有一种更简单的方法可以访问组件内部的新过滤数组..
感谢您的时间
import React, { useState, useEffect } from "react";
import { Redirect } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Spinner from "../layout/Spinner";
import { getAllSubjects } from "../../actions/subjects";
import '../styles/Dashboard.scss';
const Dashboard = ({
getAllSubjects,
auth: { user },
subjects: { subjects, loading },
}) => {
const [dashSub, setDashSub] = useState();
useEffect(() => {
getAllSubjects(user);
}, []);
// Create new array of subjects to display
if (subjects && !loading && user) {
const dashboardSubjects = subjects.filter(function (e) {
if (user.status === "Admin" || user.status === "Instructor") {
return e.instructorSubjects === user.instructorSubjects;
} else {
return e.studentSubjects === user.studentSubjects;
}
});
console.log(dashboardSubjects)
}
return loading && subjects === null ? (
<Spinner />
) : (
<div className="dashboard">
{dashboardSubjects && dashboardSubjects.map((subject) => {
return (
<ul>
</ul>
)
})}
</div>
);
};
Dashboard.propTypes = {
getAllSubjects: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
subjects: PropTypes.object.isRequired,
};
const mapStateToProps = (state) => ({
auth: state.auth,
subjects: state.subjects,
});
export default connect(mapStateToProps, { getAllSubjects })(Dashboard);
解决方案
您可以在 if 语句之前移动变量。如果它进入 if 语句,则将过滤后的数组分配给它。如果不是,它仍然是未定义的。
let dashboardSubjects;
if (subjects && !loading && user) {
dashboardSubjects = subjects.filter(function (e) {
if (user.status === "Admin" || user.status === "Instructor") {
return e.instructorSubjects === user.instructorSubjects;
} else {
return e.studentSubjects === user.studentSubjects;
}
});
console.log(dashboardSubjects);
}
如果 subject 是一个大数组,您可能需要考虑对其进行记忆,因此您仅在某些变化时才计算它,而不是在每次渲染时计算:
let dashboardSubjects = useMemo(() => {
if (subjects && !loading && user) {
return subjects.filter(function (e) {
if (user.status === "Admin" || user.status === "Instructor") {
return e.instructorSubjects === user.instructorSubjects;
} else {
return e.studentSubjects === user.studentSubjects;
}
});
} else {
return undefined;
}
}, [subjects, loading, user]);
推荐阅读
- java - 我如何使用按钮和输入键来做同样的事情?(爪哇)
- svelte - 如何预览单击 Svelte 中的图标(例如:附件图标)上传的图像?
- python - 在 PyCharm 中执行 Jupyter Notebook / Colab 指令
- react-native - React Native:持久化 API 数据并在连接时检查它是否是最新的
- r - 总结列并将其作为 R 中的 colnames- 数据框
- angular - Angular OnChanges 为输入变量触发,但变量未更新
- lvm - 缺少 LVM 卷的创建时间
- windows - 阻止用户使用 PowerShell 打开已经存在的程序
- azure - 您可以使用 sql server 别名使用活动目录集成身份验证连接到 azure 吗?
- r - rmd 子交叉引用