在输出reactjs时看不到函数

Question

在没有页眉的主页面上，此函数有效。我想把它放在单独的页面上，但不行。我看了一下例子，一切都是收敛的，不显示在单独的页面上。Аrom addpeople to add, header(example <h1>text<h1>或其他作品

addpeople.js

import React, { Component } from 'react';
import "./add.css";
import { useState } from "react";
import Axios from "axios";
import { Button } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

function newcreate() {
return (

function App() {
const [surename_ru, setSurename_ru] = useState("");
const [name_ru, setName_ru] = useState(0);
const [fname_ru, setFname_ru] = useState("");
const [surename_en, setSurename_en] = useState("");
const [name_en, setName_en] = useState(0);
const [gender, setGender] = useState("");
const [dateofbirth, setDateofbirth] = useState(0);
const [citizenship, setCitizenship] = useState("");
const [pas_ser, setPas_ser] = useState("");
const [pas_num, setPas_num] = useState(0);
const [pas_start, setPas_start] = useState("");
const [pas_end, setPas_end] = useState(0);
const [pas_given, setPas_given] = useState("");
const [pas_givenkod, setPas_givenkod] = useState("");
const [inn_num, setInn_num] = useState(0);
const [snils_num, setSnils_num] = useState("");
const [legal_type, setLegal_type] = useState(0);

const [newWage, setNewWage] = useState(0);
const [employeeList, setEmployeeList] = useState([]);
const addEmployee = () => {
Axios.post("http://localhost:3001/create", {
surename_ru: surename_ru,
name_ru: name_ru,
fname_ru: fname_ru,
surename_en: surename_en,
name_en: name_en,
gender: gender,
dateofbirth: dateofbirth,
citizenship: citizenship,
pas_ser: pas_ser,
pas_num: pas_num,
pas_start: pas_start,
pas_end: pas_end,
pas_given: pas_given,
pas_givenkod: pas_givenkod,
inn_num: inn_num,
snils_num: snils_num,
legal_type: legal_type,
}).then(() => {
setEmployeeList([
...employeeList,
{
surename_ru: surename_ru,
name_ru: name_ru,
fname_ru: fname_ru,
surename_en: surename_en,
name_en: name_en,
gender: gender,
dateofbirth: dateofbirth,
citizenship: citizenship,
pas_ser: pas_ser,
pas_num: pas_num,
pas_start: pas_start,
pas_end: pas_end,
pas_given: pas_given,
pas_givenkod: pas_givenkod,
inn_num: inn_num,
snils_num: snils_num,
legal_type: legal_type,
},
]);
});
};
const getEmployees = () => {
Axios.get("http://localhost:3001/employees").then((response) => {
setEmployeeList(response.data);
});
};
const updateEmployeeWage = (id) => {
Axios.put("http://localhost:3001/update", { wage: newWage, id: id }).then(
(response) => {
setEmployeeList(
employeeList.map((val) => {
return val.id == id
? {
surename_ru: val.surename_ru,
name_ru: val.name_ru,
fname_ru: val.fname_ru,
surename_en: val.surename_en,
name_en: val.name_en,
gender: val.gender,
dateofbirth: val.dateofbirth,
citizenship: val.citizenship,
pas_ser: val.pas_ser,
pas_num: val.pas_num,
pas_start: val.pas_start,
pas_end: val.pas_end,
pas_given: val.pas_given,
pas_givenkod: val.pas_givenkod,
inn_num: val.inn_num,
snils_num: val.snils_num,
legal_type: val.legal_type,
}
: val;
})
);
}
);
};
const deleteEmployee = (id) => {
Axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {
setEmployeeList(
employeeList.filter((val) => {
return val.id != id;
})
);
});
};
return (
<div className="App">
<div className="information">
<label>Фамилия</label>
<input
type="text"
onChange={(event) => {
setSurename_ru(event.target.value);
}}
/>
<label>Имя РУС</label>
<input
type="text"
onChange={(event) => {
setName_ru(event.target.value);
}}
/>
<label>Отчество</label>
<input
type="text"
onChange={(event) => {
setFname_ru(event.target.value);
}}
/>
<label>Surename EN</label>
<input
type="text"
onChange={(event) => {
setSurename_en(event.target.value);
}}
/>
<label>Name EN</label>
<input
type="text"
onChange={(event) => {
setName_en(event.target.value);
}}
/>
<label>gender</label>
<input
type="text"
onChange={(event) => {
setGender(event.target.value);
}}
/>
<label>Data ROJD</label>
<input
type="text"
onChange={(event) => {
setDateofbirth(event.target.value);
}}
/>
<label>Citizenship</label>
<input
type="text"
onChange={(event) => {
setCitizenship(event.target.value);
}}
/>
<label>Pas SER</label>
<input
type="text"
onChange={(event) => {
setPas_ser(event.target.value);
}}
/>
<label>Pas NUM</label>
<input
type="text"
onChange={(event) => {
setPas_num(event.target.value);
}}
/>
<label>Pas Start</label>
<input
type="text"
onChange={(event) => {
setPas_start(event.target.value);
}}
/>
<label>Pas End</label>
<input
type="text"
onChange={(event) => {
setPas_end(event.target.value);
}}
/>
<label>Pas Given</label>
<input
type="text"
onChange={(event) => {
setPas_given(event.target.value);
}}
/>
<label>Pas Givenkod</label>
<input
type="text"
onChange={(event) => {
setPas_givenkod(event.target.value);
}}
/>
<label>inn_num</label>
<input
type="text"
onChange={(event) => {
setInn_num(event.target.value);
}}
/>
<label>snils_num</label>
<input
type="text"
onChange={(event) => {
setSnils_num(event.target.value);
}}
/>
<label>legal Type</label>
<input
type="text"
onChange={(event) => {
setLegal_type(event.target.value);
}}
/>
<button onClick={addEmployee}>Add Employee</button>
</div>
<div className="employees">
<button onClick={getEmployees}>Show Employees</button>
{employeeList.map((val, key) => {
return (
<div className="employee">
<div>
<h3>surename_ru: val.surename_ru</h3>
<h3>name_ru: val.name_ru</h3>
<h3>fname_ru: val.fname_ru</h3>
<h3>surename_en: val.surename_en</h3>
<h3>name_en: val.name_en</h3>
<h3>gender: val.gender</h3>
<h3>dateofbirth: val.dateofbirth</h3>
<h3>citizenship: val.citizenship</h3>
<h3>pas_ser: val.pas_ser</h3>
<h3>pas_num: val.pas_num</h3>
<h3>pas_start: val.pas_start</h3>
<h3>pas_end: val.pas_end</h3>
<h3>pas_given: val.pas_given</h3>
<h3>pas_givenkod: val.pas_givenkod</h3>
<h3>inn_num: val.inn_num</h3>
<h3>snils_num: val.snils_num</h3>
<h3>legal_type: val.legal_type</h3>
</div>
<div>
<input
type="text"
placeholder="2000..."
onChange={(event) => {
setNewWage(event.target.value);
}}
/>
<button variant="primary"
onClick={() => {
updateEmployeeWage(val.id);
}}
>
{" "}
Update
</button>
<button variant="primary"
onClick={() => {
deleteEmployee(val.id);
}}
>
Delete
</button>
</div>
</div>
);
})}
</div>
</div>
);
}
)
}

export default newcreate;

add.js

import React, { Component } from 'react';
import newcreate from './addpeople';

function add() {
return (
<div>
<div>
<newcreate />
</div>
</div>
);
}
export default add;

Answer 1

您正在尝试从函数return()返回钩子和函数。但是你需要在返回之外这样做，这样你的逻辑才有效。你可以在这里参考react钩子文档:https://reactjs.org/docs/hooks-overview.html#:~:text=Hooks%20are%20functions%20that%20let,if%20you'd%20like.)

对于你的代码，你可以尝试这样做:

import React, { Component } from "react";
import "./add.css";
import { useState } from "react";
import Axios from "axios";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function newcreate() {
function App() {
const [surename_ru, setSurename_ru] = useState("");
const [name_ru, setName_ru] = useState(0);
const [fname_ru, setFname_ru] = useState("");
const [surename_en, setSurename_en] = useState("");
const [name_en, setName_en] = useState(0);
const [gender, setGender] = useState("");
const [dateofbirth, setDateofbirth] = useState(0);
const [citizenship, setCitizenship] = useState("");
const [pas_ser, setPas_ser] = useState("");
const [pas_num, setPas_num] = useState(0);
const [pas_start, setPas_start] = useState("");
const [pas_end, setPas_end] = useState(0);
const [pas_given, setPas_given] = useState("");
const [pas_givenkod, setPas_givenkod] = useState("");
const [inn_num, setInn_num] = useState(0);
const [snils_num, setSnils_num] = useState("");
const [legal_type, setLegal_type] = useState(0);
const [newWage, setNewWage] = useState(0);
const [employeeList, setEmployeeList] = useState([]);
const addEmployee = () => {
Axios.post("http://localhost:3001/create", {
surename_ru: surename_ru,
name_ru: name_ru,
fname_ru: fname_ru,
surename_en: surename_en,
name_en: name_en,
gender: gender,
dateofbirth: dateofbirth,
citizenship: citizenship,
pas_ser: pas_ser,
pas_num: pas_num,
pas_start: pas_start,
pas_end: pas_end,
pas_given: pas_given,
pas_givenkod: pas_givenkod,
inn_num: inn_num,
snils_num: snils_num,
legal_type: legal_type,
}).then(() => {
setEmployeeList([
...employeeList,
{
surename_ru: surename_ru,
name_ru: name_ru,
fname_ru: fname_ru,
surename_en: surename_en,
name_en: name_en,
gender: gender,
dateofbirth: dateofbirth,
citizenship: citizenship,
pas_ser: pas_ser,
pas_num: pas_num,
pas_start: pas_start,
pas_end: pas_end,
pas_given: pas_given,
pas_givenkod: pas_givenkod,
inn_num: inn_num,
snils_num: snils_num,
legal_type: legal_type,
},
]);
});
};
const getEmployees = () => {
Axios.get("http://localhost:3001/employees").then((response) => {
setEmployeeList(response.data);
});
};
const updateEmployeeWage = (id) => {
Axios.put("http://localhost:3001/update", { wage: newWage, id: id }).then(
(response) => {
setEmployeeList(
employeeList.map((val) => {
return val.id == id
? {
surename_ru: val.surename_ru,
name_ru: val.name_ru,
fname_ru: val.fname_ru,
surename_en: val.surename_en,
name_en: val.name_en,
gender: val.gender,
dateofbirth: val.dateofbirth,
citizenship: val.citizenship,
pas_ser: val.pas_ser,
pas_num: val.pas_num,
pas_start: val.pas_start,
pas_end: val.pas_end,
pas_given: val.pas_given,
pas_givenkod: val.pas_givenkod,
inn_num: val.inn_num,
snils_num: val.snils_num,
legal_type: val.legal_type,
}
: val;
})
);
}
);
};
const deleteEmployee = (id) => {
Axios.delete(`http://localhost:3001/delete/${id}`).then((response) => {
setEmployeeList(
employeeList.filter((val) => {
return val.id != id;
})
);
});
};
return (
<div className="App">
<div className="information">
<label>Фамилия</label>
<input
type="text"
onChange={(event) => {
setSurename_ru(event.target.value);
}}
/>
<label>Имя РУС</label>
<input
type="text"
onChange={(event) => {
setName_ru(event.target.value);
}}
/>
<label>Отчество</label>
<input
type="text"
onChange={(event) => {
setFname_ru(event.target.value);
}}
/>
<label>Surename EN</label>
<input
type="text"
onChange={(event) => {
setSurename_en(event.target.value);
}}
/>
<label>Name EN</label>
<input
type="text"
onChange={(event) => {
setName_en(event.target.value);
}}
/>
<label>gender</label>
<input
type="text"
onChange={(event) => {
setGender(event.target.value);
}}
/>
<label>Data ROJD</label>
<input
type="text"
onChange={(event) => {
setDateofbirth(event.target.value);
}}
/>
<label>Citizenship</label>
<input
type="text"
onChange={(event) => {
setCitizenship(event.target.value);
}}
/>
<label>Pas SER</label>
<input
type="text"
onChange={(event) => {
setPas_ser(event.target.value);
}}
/>
<label>Pas NUM</label>
<input
type="text"
onChange={(event) => {
setPas_num(event.target.value);
}}
/>
<label>Pas Start</label>
<input
type="text"
onChange={(event) => {
setPas_start(event.target.value);
}}
/>
<label>Pas End</label>
<input
type="text"
onChange={(event) => {
setPas_end(event.target.value);
}}
/>
<label>Pas Given</label>
<input
type="text"
onChange={(event) => {
setPas_given(event.target.value);
}}
/>
<label>Pas Givenkod</label>
<input
type="text"
onChange={(event) => {
setPas_givenkod(event.target.value);
}}
/>
<label>inn_num</label>
<input
type="text"
onChange={(event) => {
setInn_num(event.target.value);
}}
/>
<label>snils_num</label>
<input
type="text"
onChange={(event) => {
setSnils_num(event.target.value);
}}
/>
<label>legal Type</label>
<input
type="text"
onChange={(event) => {
setLegal_type(event.target.value);
}}
/>
<button onClick={addEmployee}>Add Employee</button>
</div>
<div className="employees">
<button onClick={getEmployees}>Show Employees</button>
{employeeList.map((val, key) => {
return (
<div className="employee">
<div>
<h3>surename_ru: val.surename_ru</h3>
<h3>name_ru: val.name_ru</h3>
<h3>fname_ru: val.fname_ru</h3>
<h3>surename_en: val.surename_en</h3>
<h3>name_en: val.name_en</h3>
<h3>gender: val.gender</h3>
<h3>dateofbirth: val.dateofbirth</h3>
<h3>citizenship: val.citizenship</h3>
<h3>pas_ser: val.pas_ser</h3>
<h3>pas_num: val.pas_num</h3>
<h3>pas_start: val.pas_start</h3>
<h3>pas_end: val.pas_end</h3>
<h3>pas_given: val.pas_given</h3>
<h3>pas_givenkod: val.pas_givenkod</h3>
<h3>inn_num: val.inn_num</h3>
<h3>snils_num: val.snils_num</h3>
<h3>legal_type: val.legal_type</h3>
</div>
<div>
<input
type="text"
placeholder="2000..."
onChange={(event) => {
setNewWage(event.target.value);
}}
/>
<button
variant="primary"
onClick={() => {
updateEmployeeWage(val.id);
}}
>
{" "}
Update
</button>
<button
variant="primary"
onClick={() => {
deleteEmployee(val.id);
}}
>
Delete
</button>
</div>
</div>
);
})}
</div>
</div>
);
}
}

希望这对你有帮助!

Answer 2

function App() {
const [surename_ru, setSurename_ru] = useState("");
const [name_ru, setName_ru] = useState(0);
const [fname_ru, setFname_ru] = useState("");
const [surename_en, setSurename_en] = useState("");
const [name_en, setName_en] = useState(0)....
export default App;

问题解决，谢谢。