react-refresh-runtime.development.js：315 uncatch TypeError： 无法读取 undefined 的属性(读取 'map')

好的，所以错误是当我更新tableEntry.color[index]的值时，每当我单击单选按钮时，我都想将tableEntry.color=[index'的值更改为"灰色"(如果它是橙色(，反之亦然。但是我的代码崩溃了。有什么解决办法吗？

该错误发生在函数调用handleColor上。请告诉我我能做些什么。谢谢！

import { useState, useEffect } from "react";
import "../../styles/slide-styles/slide-four.css";
import DropFileInput from "../drop-file-input/DropFileInput";
import RadioBtnSelector from "../SlideFour/RadioBtnSelector";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";
import RadioBtn from "../SlideFour/RadioBtn";
import { orange, grey } from "@mui/material/colors";
import Radio from "@mui/material/Radio";
const ConfiguratorSlideFour = ({ carousel, getter }) => {
const onFileChange = (files) => {
console.log(files);
};
const [anzahlCounter, setAnzahlCounter] = useState(1);
const handleAnzahlChange = (item) => {
if (item === "-1") {
if (anzahlCounter > 1) {
setAnzahlCounter(anzahlCounter - 1);
}
} else setAnzahlCounter(anzahlCounter + 1);
};
const [tableEntry, setTableEntry] = useState({
No: [1, 2],
fileName: ["file1", "file2"],
format: ["123 x 234", "342 x 112"],
color: ["grey", "orange"],
number: ["1", "2"],
processing: [getter, getter],
price: [7, 21],
inTotal: [14, 43],
});
const [entry, setEntry] = useState({
number: 0,
color: "orange",
verarb: "",
});
useEffect(() => {
console.log(entry);
}, [entry]);
const handleEntry = (item) => {
if (item === "number") {
setEntry({ ...entry, number: anzahlCounter });
handleEntryChange(anzahlCounter, "number");
} else if (item === "color") {
} else if (item === "verarb") {
}
};
const handleNumber = (item) => {
setEntry({ ...entry, number: item });
};
const [boolIsEdit, setBoolIsEdit] = useState(false);
const [indexForMap, setIndexForMap] = useState(0);
const handleEntryChange = (item, choice) => {
if (boolIsEdit) {
if (choice === "number") {
setTableEntry(
(perviousState) => (perviousState.number[indexForMap] = item)
);
} else if (choice === "color") {
} else if (choice === "verarb") {
}
setBoolIsEdit(!boolIsEdit);
}
};
useEffect(() => {
setTableEntry((prevState) => ({
...prevState,
processing: [getter, getter],
}));
}, [getter]);
useEffect(() => {
console.log("color",tableEntry.color);
}, [tableEntry]);
//color select states
const [selectedValue, setSelectedValue] = React.useState("grey");
const handleChange = (event) => {
if (event.target.value === "orange") setSelectedValue(event.target.value);
else setSelectedValue("grey");
};
const controlProps = (item) => ({
checked: selectedValue === item,
onChange: handleChange,
value: item,
name: "color-radio-button-demo",
inputProps: { "aria-label": item },
});

//
const handleColor = (ind,colorCheck) =>{

if(colorCheck==="grey"){

setTableEntry(prevState=>{
return{
color: prevState.color[ind]='orange'
}
});
console.log("COLOR UPDATED O to g: ",tableEntry.color);

}
else{
setTableEntry(prevState=>{
return{
color: prevState.color[ind]='grey'
}
});
console.log("COLOR UPDATED g to O: ",tableEntry.color);
}
// else{
//   setTableEntry((prevState)=> (
//     prevState.color[ind]="grey"
//       ))
// }
}

return (
<div className="parent-container">
<h1> Fourth Slide </h1>
<Table striped size="sm">
<thead>
<tr className="border-top">
<th>
<h4>NR.</h4>
</th>
<th>
<h4>Dateiname</h4>
</th>
<th>
<h4>Format</h4>
</th>
<th>
<h4>Farbe</h4>
</th>
<th>
<h4>Anzahl</h4>
</th>
<th>
<h4>Verarb.</h4>
</th>
<th>
<h4>Preis</h4>
</th>
<th>
<h4>Gesamt</h4>
</th>
</tr>
</thead>
<tbody>
{tableEntry.No.map((item, index) => {
return (
<tr>
<td>{tableEntry.No[index]}</td>
<td>{tableEntry.fileName[index]}</td>
<td>{tableEntry.format[index]}</td>
<td>
{tableEntry.color[index]==='orange' && 

<Radio
{...controlProps("orange")}
sx={{
color: grey[800],
"&.Mui-checked": {
color: orange[600],
},
}}
checked={true}
onClick={()=>{handleColor(index,tableEntry.color[index])}}

/>
}
{tableEntry.color[index]==='grey' && 

<Radio
{...controlProps("grey")}
sx={{
color: grey[800],
"&.Mui-checked": {
color: grey[800],
},
}}
checked={true}
onClick={()=>{handleColor(index,tableEntry.color[index])}}

/>
}
</td>
<td>{tableEntry.number[index]}</td>
<td>
{tableEntry.processing[index] === "Rollen" && (
<div className="verarb-row">
<h5 style={{ color: "orange" }}>R</h5>
<h5 style={{ color: "grey" }}>F</h5>
<h5 style={{ color: "grey" }}>L</h5>
<h5 style={{ color: "grey" }}>V</h5>
</div>
)}
{tableEntry.processing[index] === "Falten" && (
<div className="verarb-row">
<h5 style={{ color: "grey" }}>R</h5>
<h5 style={{ color: "orange" }}>F</h5>
<h5 style={{ color: "grey" }}>L</h5>
<h5 style={{ color: "grey" }}>V</h5>
</div>
)}
{tableEntry.processing[index] === "Falten Lochen" && (
<div className="verarb-row">
<h5 style={{ color: "grey" }}>R</h5>
<h5 style={{ color: "orange" }}>F</h5>
<h5 style={{ color: "orange" }}>L</h5>
<h5 style={{ color: "grey" }}>V</h5>
</div>
)}
{tableEntry.processing[index] ===
"Falten Lochen Verstarken" && (
<div className="verarb-row">
<h5 style={{ color: "grey" }}>R</h5>
<h5 style={{ color: "orange" }}>F</h5>
<h5 style={{ color: "orange" }}>L</h5>
<h5 style={{ color: "orange" }}>V</h5>
</div>
)}
</td>
<td>7,25$</td>
<td>14,50$</td>
</tr>
);
})}
</tbody>
</Table>
<div className="btmContainer">
<div className="dropBoxChildContainer">
<div className="dropBoxContainer">
<DropFileInput
className="dropBoxFiles"
onFileChange={(files) => onFileChange(files)}
slide="slide4"
/>
</div>
</div>
<RadioBtnSelector className="divRadioBtnSelector" />
<div className="VerarbCounter">
<NavigateBeforeIcon
fontSize="large"
onClick={() => {
handleAnzahlChange("-1");
handleEntry("number");
}}
/>
<h4 onChange={() => handleNumber(anzahlCounter)}>{anzahlCounter}</h4>
<NavigateNextIcon
fontSize="large"
onClick={() => {
handleAnzahlChange("+1");
handleEntry("number");
}}
/>
</div>
<div className="verarbBtmContainer">
<h5 style={{ color: "orange" }}>R</h5>
<h5 style={{ color: "orange" }}>F</h5>
<h5 style={{ color: "orange" }}>L</h5>
<h5 style={{ color: "orange" }}>V</h5>
</div>
<div className="totalBillContainer">
<div className="totalBill">
<h6>Gesamtt Netto: </h6>
<h6>14$ </h6>
</div>
<div className="totalBill">
<h6>MwSt(19%): </h6>
<h6>7.22$ </h6>
</div>
<div className="totalBill">
<h6>Gesamt Brutto </h6>
<h6>45.22$ </h6>
</div>
</div>
</div>
<button
className="btn f-right me-2 mt-5 n-button"
onClick={() => carousel.current.slideNext()}
>
{" "}
Weiter
</button>
<button
className="btn f-right me-2 mt-5 p-button"
onClick={() => carousel.current.slidePrev()}
>
{" "}
Zurück
</button>
</div>
);
};
export default ConfiguratorSlideFour;