如何在 React 中访问 if 语句中的常量

Question

我正在使用 react/redux。我从我的数据库中引入一个数组并将其设置为我的 redux 状态之一。在我的一个组件内部，我正在过滤该数组以创建一个新数组。但在我这样做之前，我必须检查是否已加载 redux 状态，以便我尝试过滤的数组不会显示为“null”。作为一种解决方案，我使用 if 语句来检查状态是否已加载。 if 语句中的新过滤数组有效并返回我想要的（因为我在 if 语句中进行了控制台记录）。但是，我无法访问新的过滤数组，因为它位于 if 语句中......我该如何解决这个问题？

我尝试过的：

1. 使用 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);

Answer 1

您可以在 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]);