react面試題 機試題

用react寫一個的財務系統，系統有新增，刪除，更改資料,以及計算出金額的變化

---

專案主要實現功能

建立專案

使用create-react-app建立專案基本骨架

專案結構

Record.js 可以新增資料

addRecord(record) {
this.setState({
  error: null,
  isLoaded: true,
  //新增資料
  records: [
    ...this.state.records,
    record
  ]
})
複製程式碼

}

Records.js中建立資料的表單，有修改和刪除功能

刪除 函式；使用filter

    deleteRecord(record) {
const recordIndex = this.state.records.indexOf(record);
const newRecords = this.state.records.filter((item, index) =>{
  if (recordIndex !== index) {
    return item;
  }
});
this.setState({
  records: newRecords
})
複製程式碼

}

修改函式；使用map遍歷

updateRecord(record, data) {
const recordIndex = this.state.records.indexOf(record);
const newRecords = this.state.records.map((item, index) =>{
  if(index !== recordIndex) {
    return item;
  }
  return {
    ...item, 
    ...data
  }
  // data覆蓋原來的資料
}
複製程式碼

);

金額的變化計算，分別計算出收入輸出的金額，在彼此相加，輸入輸出技術函式時一樣的方法

輸入金額計算函式

credits(){
let credits = this.state.records.filter((record) => {
  return record.amount > 0;
})
return credits.reduce((prev, curr) => {
  return prev + Number.parseInt(curr.amount, 0)
}, 0)
複製程式碼

}

github地址： github.com/hongzhengzh…