无法在 React 的表中存储我的状态

如何解决无法在 React 的表中存储我的状态

我真的需要你的帮助，我卡住了，我的本地存储有一个小问题，无法将我的状态保存在我的桌子上，当我尝试使用组件的 localstorage 时，我想保存每个单元格的数据CellColor 但当我刷新页面时只保存第一个单元格。我想保存两个元素 CellColor 和 CellData

import React,{ useState,useEffect } from 'react';
import styled from 'styled-components';

 const COLOR = styled.div`
     td {
    width: 150px;
      }
      `;

 const CellColor = () => {
     const darkgreen = '#4FA100';
     const lightgreen = '#88FF17';
     const pink = '#FF43D7';
     const orange = '#FFA419';
     const white = '#FFFFFF';

 const [cellColor,setCellColor] = useState({
   darkgreen,lightgreen,orange,pink,});

 const handleColor = () => {
 setCellColor(
  cellColor === white
? lightgreen
: cellColor === lightgreen
? pink
: cellColor === pink
? orange
: cellColor === orange
? darkgreen
: white
 );
};

useEffect(() => {
 const Data = localStorage.getItem('cell-data');
 setCellColor(JSON.parse(Data));
},[]);

 useEffect(() => {
   localStorage.setItem('cell-data',JSON.stringify(cellColor));
  });

 return (
   <COLOR className="cell-color">
  <td
      className="cell-click"
       role="presentation"
       style={{ backgroundColor: cellColor }}
      onClick={(e) => handleColor(e.target.style.backgroundColor)}
    />
   </COLOR>
  );
   };

export default CellColor;

还有这个和我的第二个组件，或者我使用 Axios 调用我的 api 并映射到 select 以显示我的数据

import React,useEffect } from 'react';
import axios from 'axios';
import styled from 'styled-components';

const SELECTDATA = styled.select`
  width: 150px;
  height: 30px;
 `;

  const CellData = () => {
  const [dataAgency,setDataAgency] = useState([]);
  const [dataHazard,setDataHazard] = useState([]);
  const [dataOther,setDataOther] = useState([]);
  const [dataSite,setDataSite] = useState([]);

  const fetchDataOne = async () => {
  const urlHazard = 'http://localhost:8000/hazards';
  await axios.get(urlHazard).then((response) => {
  setDataHazard(response.data);
  });
  };

  const fetchDataTwo = async () => {
  const urlAgencies = 'http://localhost:8000/agencies';
  await axios.get(urlAgencies).then((response) => {
  setDataAgency(response.data);
  });
  };

  const fetchDataThree = async () => {
  const urlOther = 'http://localhost:8000/others';
  await axios.get(urlOther).then((response) => {
  setDataOther(response.data);
  });
  };
  const fetchDataFour = async () => {
  const urlSite = 'http://localhost:8000/sites';
  await axios.get(urlSite).then((response) => {
  setDataSite(response.data);
  });
  };

 useEffect(() => {
   fetchDataOne();
   fetchDataTwo();
   fetchDataThree();
   fetchDataFour();
 },[]);

  return (
    <div className="cell-data-select">
     <SELECTDATA className="data-select">
    <optgroup label="Action Terrain">
      <option disabled selected value>
        -- --
      </option>
      {dataSite.map((i) => (
        <option key={i._id} value={i.siteName}>
          {i.siteName}
        </option>
      ))}
    </optgroup>
    <optgroup label="Action Agence">
      {dataAgency.map((ag) => (
        <option key={ag._id} value={ag.agencyName}>
          {ag.agencyName}
        </option>
      ))}
    </optgroup>
    <optgroup label="Aleas">
      {dataHazard.map((ha) => (
        <option key={ha._id} value={ha.hazardName}>
          {ha.hazardName}
        </option>
      ))}
    </optgroup>
    <optgroup label="Autre">
      {dataOther.map((ot) => (
        <option key={ot._id} value={ot.otherName}>
          {ot.otherName}
        </option>
      ))}
    </optgroup>
  </SELECTDATA>
</div>
  );

};

export default CellData;

我想保存这两个组件 CellColor 和 CellData

这是我的表格渲染，我使用 COLUMUNS 和 DataCell 来映射我的值

import React,{ useContext } from 'react';
import { Table } from 'react-bootstrap';
import PrevContext from '../service/PrevContext';
import './StylePlanning.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import COLUMNS from './table-components/Columns';
import DataCell from './table-components/DataCell';

const TablePrev = () => {
const { prevName } = useContext(PrevContext);
const { firstname,lastname } = prevName;

 return (
 <div className="block-planning-prev">
 <Table bordered style={{ color: 'navy',fontWeight: 'bold' }}>
  <thead>
  <tr className="row0">
    <td className="month-title" colSpan="31">
      <input type="month" />
    </td>
  </tr>
  <tr className="row1">
    <td>Preventeur</td>
    {COLUMNS.map((ic) => (
      <td key={ic.accessor} value={ic.Header}>
        {ic.Header}
      </td>
    ))}
  </tr>
</thead>
{prevName.map((i) => (
  <tbody>
    <tr className="row0">
      <th
        key={i._id}
        value={(firstname,lastname)}
        className="column0"
        rowSpan="2"
      >
        {i.firstname}
        {i.lastname}
      </th>
      {DataCell.map((id) => (
        <td key={id.key} value={(id.col,id.col1)} className="column1">
          {id.col}
          {id.col1}
        </td>
      ))}
    </tr>
    <tr className="row1">
      {DataCell.map((item) => (
        <td
          key={item.key}
          value={(item.col,item.col1)}
          className="column2"
        >
          {item.col}
          {item.col1}
        </td>
      ))}
     </tr>
   </tbody>
   ))}
    </Table>
  </div>
  );
 };
export default TablePrev;

这里是我的数据文件 DataCell，我在其中导入了我的两个 JSX 元素 CellColor 和 CellData

import React from 'react';
import CellColor from './CellColor';
import CellData from './CellData';

 const DATA = [
 {
  col: <CellColor />,col1: <CellData />,key: '1',},{
  col: <CellColor />,key: '2',key: '3',{
  etc.
]
export default DATA;

我完全迷失了，我不知道现在如何继续，最好的选择是什么，我直接在我的表格渲染中尝试过但不起作用，所以我认为当我使用 localstorage 时最好直接保存到父组件中？非常感谢您的帮助