从 React 中从 redux 读取的数据更新状态

这是我为一个项目构建的一个教育组件。目前，教育数据是在第二次重新渲染时从 redux 状态中读取的。我的目标是为教育数据中的每个单独条目添加一个可见性按钮。Education_data 是一个对象数组。该按钮将允许用户隐藏链接到他们希望隐藏的索引的数据。我有另一个名为education_vis 的变量，它存储了一个大小为education_data 大小的数组，最初具有真实值，需要将其保存到状态中以隐藏渲染上的元素。使用 useState 进行的这种保存与从使用 useSelector 抓取的 redux 数据中读取的数据不同步。

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import * as educationActions from "../../actions/educationActions";
import DeleteButton from "./deleteButton";
import UpdateButton from "./updateButton";
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
import {  BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import EducationForm  from "../forms/updateForms/educationForm";

const Education = () => {
    const dispatch = useDispatch();
      useEffect(() => {
        const userEducation = async () => {
          await dispatch(educationActions.getEducation('60fcc884bbed863d20b02573'));
        };
        userEducation();
      }, [dispatch]);
     const education_data = useSelector((state) => state.education.education);
     var education_vis = Array(education_data.length);
     if(education_vis[0] === undefined){
      for(var i = 0; i < education_data.length; i++){
        education_vis[i] = true;
      }
     } 

    
    const handleChange = (index) => {
      education_vis[index] = !education_vis[index];
      console.log(education_vis);
    }

    return (
      <Router>
        <div>
            <p> Education </p>
            <hr />
            {education_data.map((value, index) => {
              return ( 
              <div>  
                <VisibilityOffIcon onClick = {()=>handleChange(index)} />
                  {education_vis[index] ? <div key={index}>
                    <p>{ value.university_name }, { value.university_city }, { value.university_state }  { value.month_begin } { value.year_begin } - { value.month_end } { value.year_end }</p>
                    <p>{ value.degree_name } in { value.domain_name } { value.GPA }</p>
                    <DeleteButton elementId = { value._id } page = { "Education" }/>
                    <Link to={ `/education/${value._id}/update` } ><UpdateButton /></Link>
                  </div> : null}
              </div>
              )
            })}
        </div>
        <Switch>
          <Route path="/education/:elementId/update">
          <EducationForm />
          </Route>
        </Switch>
      </Router>
    )
}

export default Education

以下是示例 education_data 的外观。相同的education_vis 将是[true, true]

/* var education_data = [
  { 
    degree_name: "Masters",
    domain_name: "Information Sciences and Technology",
    school_name: "iSchool",
    university_name: "Rochester Institute of Technology",
    university_city: "Rochester",
    university_state: "NY",
    university_country: "USA",
    year_begin: "2019",
    month_begin: "August",
    year_end: "2021",
    month_end: "December",
    GPA: "3.8",
  },{
    degree_name: "Bachelors",
    domain_name: "CS",
    school_name: "DSCE",
    university_name: "VTU",
    university_city: "Bangalore",
    university_state: "Karnataka",
    university_country: "India",
    year_begin: "2014",
    month_begin: "August",
    year_end: "2018",
    month_end: "June",
    GPA: "3.8",
}] */

这是我尝试使用 useStates() 设置状态的方法。

     const [educationVisibility, setEducationVisibility] = useState(education_vis);
     useEffect(() => {
      setEducationVisibility(education_vis)
   },[education_vis])
    

我试图在单击 . 为此，我需要将education_vis 上传到能够重新渲染组件的状态，并且需要帮助来完成此操作。