无法设置包含在数组本身中的数组元素的状态

Question

我正在从我的后端接收数据，这是一个包含多个数组的数组，这些多个数组包含三个元素[name, email, binary]。

response.data.data.values = [Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3), Array(3)]

和

Array(3) = ['Name1', '[e-mail]', '0']
.
.
.
Array(3) = ['Name21', '[e-mail]', '1']

代码:

import React, { useState } from "react";
import Axios from "axios";
function Attendance() {
const [attedanceList, setAttedanceList] = useState([]);
Axios.get("http://localhost:9000/attendance").then((response) => {
setAttedanceList(response.data.data.values);
});
function changeValue(event) {
let { name, value } = event.target;
setAttedanceList([
attedanceList.map((items) => {
return (
items[0] === name && [...attedanceList, [items[0], items[1], value]]
);
}),
]);
event.preventDefault();
console.log(attedanceList);
}
function sendAllValues() {
Axios.post("http://localhost:9000/attendance", { attedanceList });
}
return (
<form>
{attedanceList.map((val, index) => {
if (index !== 0) {
let present = "present" + index;
let absent = "absent" + index;
return (
<div key={index}>
<div>
{val[0]} {val[1]}
<input
type="radio"
id={present}
name={val[0]}
value="1"
checked={val[2] === "1"}
onChange={changeValue}
/>
<label for={present}>Present</label>
<input
type="radio"
id={absent}
name={val[0]}
value="0"
checked={val[2] === "0"}
onChange={changeValue}
/>
<label for={absent}>Absent</label>
</div>
</div>
);
}
})}
<button type="submit" onClick={sendAllValues}>
Submit
</button>
</form>
);
}

我需要根据用户的无线电输入保存二进制(0或1)的状态，这是所有Array(3)的第三个元素。但是，尽管尝试了很多次，我还是无法设置任何特定单选按钮的状态及其对应的二进制按任意随机顺序． 我该怎么做呢?

Answer 1

自数据抓取是异步的,你应该做的副作用。如果您使用钩子，一个流行的方法是使用useEffect钩子。

相关代码片段:

useEffect(() => {
const fetchData = async() => {
const response = await Axios.get("http://localhost:9000/attendance")
setAttedanceList(response.data.data.values);
};
fetchData().catch((e) => setError(e.message));
}, []);