将useState变量从一个JSX文件传递到另一个文件时出现问题

(CreateColumn.jsx)

import React, { useState, useEffect } from "react";
import Axios from "axios";
import "./styles.css";
function CreateColumn() {
let [val1, setVal1] = useState("0");
let [val2, setVal2] = useState("0");
let [secName, setSecName] = useState("");
let [goAttendance, setGoAttendance] = useState(0);
function valueChanged(event) {
const checkChecked = event.target.id;
// console.log(checkChecked);
if (checkChecked === "section1") {
setVal1("1");
setVal2("0");
setSecName("Section 1");
} else if (checkChecked === "section2") {
setVal2("1");
setVal1("0");
setSecName("Section 2");
} else {
setVal1("0");
setVal2("0");
setSecName("");
}
}
useEffect(() => {
Axios.get("http://localhost:9000/createColumn").then((response) => {
setSecName(response.data);
});
}, []);
function sendColumn(event) {
setGoAttendance(1);
Axios.post("http://localhost:9000/createColumn", { secName, goAttendance });
}
return (
<div>
<form className="form-body">
<div className="form-check check-line center-col">
<input
className="form-check-input"
type="checkbox"
id="section1"
name="section"
value={val1}
checked={val1 === "1"}
onChange={valueChanged}
/>
</div>
<div className="form-check check-line center-col">
<input
className="form-check-input"
type="checkbox"
id="section2"
name="section"
value={val2}
checked={val2 === "1"}
onChange={valueChanged}
/>
</div>
<div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
<button
type="submit"
className="btn btn-lg btn-primary"
onClick={sendColumn}
>
Create
</button>
</div>
</form>
</div>
);
}
export default CreateColumn;

(考勤.jsx)

import React, { useState, useEffect } from "react";
import Axios from "axios";
import TableTitle from "./TableTitle";
import Pagination from "./Pagination";
import "./styles.css";
function Attendance() {
const [attedanceList, setAttedanceList] = useState([]);
useEffect(() => {
Axios.get("http://localhost:9000/attendance/" + ****WANT TO USE secName FROM CreateColumn.jsx HERE****).then(
(response) => {
setAttedanceList(response.data.data.values);
}
);
}, []);
function sendAllValues(event) {
Axios.post("http://localhost:9000/attendance", { attedanceList });
}
return (
<form className="form-body">
<TableTitle />
<Pagination data={attedanceList} />
<div className="submit-btn d-grid gap-2 d-md-flex justify-content-md-center">
<button
type="submit"
className="btn btn-lg btn-primary"
onClick={sendAllValues}
>
Submit
</button>
</div>
</form>
);
}
export default Attendance;

(应用程序jsx)

import React, { useState } from "react";
import Attendance from "./Attendance";
import CreateColumn from "./CreateColumn";
function App() {
return (
<div>
<CreateColumn />
**WANT TO USE goAttendance FROM CreateColumn.jsx HERE** && <Attendance />
</div>
);
}
export default App;

我想在Attendance.jsx和App.jsx中使用Column.jsx中的useState变量(secName和goAttendance)(其中我标记为想要使用…)。这怎么可能？

更确切地说，我想将Column.jsx中的secName使用到Attendance.jsx中。此外，我想将Column.jsx中的goAttendance使用到App.jsx 中

我尝试了很多东西好几个小时，但有时它会破坏我的代码，或者只是需要更改很多，这会使代码变得更加混乱和bug。