Question

我正在使用react / 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);

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);
}

如果主题是一个大型数组，您可能需要考虑记住这一点，因此仅在发生更改时才进行计算，而不是在每个渲染器上进行计算：

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]);

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

1 个答案: