【发布时间】:2021-08-30 18:55:19
【问题描述】:
我想收集存储在每个对象中的名称(Jenny、Tiffany 等)。这些对象存在于一个数组中。我用过Array.prototype.every() 和Array.prototype.forEach(),但我认为它们不是正确的方法。
我还想指出,这些代码中的大多数来自 Codaffection。我正在练习使用 React 进行开发。
如果您想试验代码,click here。
在每个对象中,都有一个 id、fullname、email 等。
这是为每个员工添加、编辑、生成唯一 ID 并获取所有存储数据的代码。
const KEYS = {
employees: 'employees',
employeeId: 'employeeId'
}
export function insertEmployee(data) {
let employees = getAllEmployees();
data['id'] = generateEmployeeId()
employees.push(data)
localStorage.setItem(KEYS.employees, JSON.stringify(employees))
}
export function updateEmployee(data) {
let employees = getAllEmployees();
let recordIndex = employees.findIndex(x => x.id == data.id);
employees[recordIndex] = { ...data }
localStorage.setItem(KEYS.employees, JSON.stringify(employees));
}
export function generateEmployeeId() {
if (localStorage.getItem(KEYS.employeeId) == null)
localStorage.setItem(KEYS.employeeId, '0')
var id = parseInt(localStorage.getItem(KEYS.employeeId))
localStorage.setItem(KEYS.employeeId, (++id).toString())
return id;
}
export function getAllEmployees() {
if (localStorage.getItem(KEYS.employees) == null)
localStorage.setItem(KEYS.employees, JSON.stringify([]))
let employees = JSON.parse(localStorage.getItem(KEYS.employees));
//map departmentID to department title
let departments = getDepartmentCollection();
return employees.map(x => ({
...x,
department: departments[x.departmentId - 1].title
}))
}
这就是添加和更新新员工的方式。
const [records, setRecords] = useState(employeeService.getAllEmployees());
const addOrEdit = (employee, resetForm) => {
if (employee.id == 0) employeeService.insertEmployee(employee);
else employeeService.updateEmployee(employee);
resetForm();
setRecords(employeeService.getAllEmployees());
}
这是输入值和触发 addOrEdit 函数的方式。
const initialFValues = {
id: 0,
fullName: "",
email: "",
mobile: "",
city: "",
gender: "male",
departmentId: "",
hireDate: new Date(),
isPermanent: false
};
<Controls.Input
name="fullName"
label="Full Name"
value={values.fullName}
/>
<Controls.Input
label="Email"
name="email"
value={values.email}
/>
<Controls.Input
label="Mobile"
name="mobile"
value={values.mobile}
/>
<Controls.Button type="submit" text="Submit" />
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
addOrEdit(values, resetForm);
}
};
这就是我试图捕捉名字的方式:Jenny、Tiffany 等。
const listOfNames = () => {
var nameList = employeeService.getAllEmployees();
var eachName = nameList.forEach(employee.fullName); // <- This is the problem.
console.log("List of Employees: ", nameList);
};
如果您想试验代码,click here。
【问题讨论】:
-
哦,确实如此!但我不打算将它们添加到自己的数组中。这是一个好的开始,我将尝试弄清楚如何从这个新数组中单独解析它们。谢谢!
标签: arrays reactjs object properties react-hooks