Javascript React.js-在我的项目中创建新发票时遇到问题

我是一个新的反应者，我真的可以用手去理解如何在我的项目中创建一个新的发票

问题： 目前，我可以创建一个新的发票没有问题，如下图所示。我将输入更改为一些测试数据，以帮助说明我遇到的问题

下面是显示到目前为止堆栈中发票总数的俯视图

当我创建第二张新发票时，问题就出现了。它保留了我第一次修改的所有旧数据，即使我可以单击它们并彼此独立地修改它们。奇怪的是。。。只有一些价值观保持不变，而其他价值观可以相互独立

这是在创建第二张发票之后直接进行的：

我将第二张发票更改为所有新数据：

这是发票1中的结果：

现在，当我创建第三张新发票时：

这告诉我他们是有联系的。。与我的项目的直接链接如下：

否则，我认为问题在于如何创建新发票或如何修改发票中的数据。请看我修改发票的第113行或创建新发票的第94行。我需要所有能得到的帮助，谢谢

从“React”导入React；
从“力矩”中导入力矩；
//组成部分
从“./login-signup/login-signup”导入LoginSignUp；
从“./Navigation/Navigation”导入导航；
从“./Pages/Pages”导入页面；
//资料
从“../data/users.json”；/”导入UsersJSON现在有一些测试数据。稍后将连接数据库。
从“../data/app.json”导入AppJSON；
//造型
导入“fontsource roboto”；
导入“../styles/app.css”；
导出默认类App扩展React.Component{
状态={
loggedIn:false，//设置为true以绕过登录。
转换输出：false，
activeUser:“，//如果loggedIn设置为true，则可以在此处输入任何名称。
活动页面：“发票”，
invoiceMode：“查看”//除非您想从特定的可管理发票开始，否则不要更改此选项。
userData:{}，//如果要查找一些示例数据，请将其设置为来自用户的特定数组索引。
用户：UsersJSON，
appData:AppJSON
};
setActiveModeView=（单击）=>{//查看所有发票
这是我的国家({
发票模式：“查看”
});
}
setActiveModeEdit=（）=>{//查看特定的可管理/可编辑发票
这是我的国家({
发票模式：“编辑”
});
}
login=（userData）=>{//登录并存储用户数据以供组件使用。
让user=this；
让username=userData.personalInfo.name；
这是我的国家({
userData:userData，
转换输出：false
});
setTimeout（function（）{//让应用程序在登录前设置动画。
user.setState({
洛格丁：没错，
活动用户：用户名
});
}, 1000);
};
注销=（）=>{//注销并重置用户数据。
让user=this；
这是我的国家({
转换输出：对
});
setTimeout（function（）{//让应用程序在注销前设置动画。
user.setState({
洛格丁：错，
用户数据：{}，
活动页面：“发票”，
发票模式：“查看”，
活动用户：“
});
}, 1500);
}
setActivePage=（页面）=>{//更改选项卡
让pageName=page.target.innerHTML.toLowerCase（）.replace（/\s/g'）；
让app=这个；
如果（pageName！==“发票”）{//如果不在发票内，则将查看模式更改回默认模式。
setTimeout（函数（）{
app.setActiveModeView（）；
}, 500);
}否则{
应用程序setActiveModeView（“发票”）；
};
这是我的国家({
activePage:pageName
});
};
createInvoice=idx=>{
console.log（UsersJSON[0]。发票[0]）；
this.setState（prevState=>({
用户数据：{
…prevState.userData，
发票：[
…prevState.userData.invoices，
{
…UsersJSON[0]。发票[0]，
发票ID:idx+1，
日期：时刻（新日期（））.格式（“YYYY-MM-DD”）
}
]
}
}));
};
modifyInvoice=（userData、invoiceIdx、ClientDX、otherInputSelected、otherData）=>（inputSelected）=>{//编辑特定发票数据并将其存储回状态
const-app=这个；
让targetID，newVal；
如果（inputSelected！==未定义）{
targetID=inputSelected.target.id；
newVal=inputSelected.target.value；
}否则{
开关（选择其他输入）{
“billToEmail”案例：
targetID=选择的其他输入；
newVal=其他数据；
打破
案例“fromEmail”：
targetID=选择的其他输入；
newVal=其他数据；
打破
违约：
console.warn（“未选择其他要保存到应用程序状态的输入”）；
};
}
让newUserData=userData；
功能（不动产）{
app.setState({
userData:newUserData
});
}
开关（targetID）{//您要修改哪个输入？
案例“发票名称”：
newUserData.invoices[invoiceIdx].invoiceName=newVal；
房地产（）；
打破
//帐单
案例“billToName”：
newUserData.invoices[invoiceIdx].toName=newVal；
房地产（）；
打破
“billToEmail”案例：
newUserData.invoices[invoiceIdx].toEmail=newVal；
房地产（）；
打破
案例“billToStreet”：
newUserData.invoices[invoiceIdx].toAddress.street=newVal；
房地产（）；
打破
案例“billToCityState”：
newUserData.invoices[invoiceIdx].toAddress.cityState=newVal；
房地产（）；
打破
案例“billToZip”：
newUserData.invoices[invoiceIdx].toAddress.zip=newVal；
房地产（）；
打破
案例“billToPhone”：

import React from 'react';
import Moment from 'moment';

//components
import LoginSignUp from './login-signup/login-signup';
import Navigation from './navigation/navigation';
import Pages from './pages/pages';

//data
import UsersJSON from '../data/users.json'; // some test data for now. going to connect a database later.
import AppJSON from '../data/app.json';

//styling
import 'fontsource-roboto';
import '../styles/app.css';

export default class App extends React.Component {
  state = {
    loggedIn: false, // set to true to bypass logging in.
    transitionOut: false,
    activeUser: "", // can put whatever name you want here if loggedIn is set to true.
    activePage: "invoices",
    invoiceMode: "view", // dont change this unless you want to start with a specific manageable invoice.
    userData: {}, // set to the specific array index from the users if looking for some sample data.
    users: UsersJSON,
    appData: AppJSON
  };

  setActiveModeView = (clicked) => { // view all of the invoices
    this.setState({
      invoiceMode: "view"
    });
  }

  setActiveModeEdit = () => { // view a specific manageable/ editable invoice
    this.setState({
      invoiceMode: "edit"
    });
  }

  login = (userData) => { // login and store the users data for component use.
    let user = this;
    let username = userData.personalInfo.name;

    this.setState({
      userData: userData,
      transitionOut: false
    });

    setTimeout(function() { // let the app animate out before logging in.
      user.setState({
        loggedIn: true,
        activeUser: username
      });
    }, 1000);
  };

  logout = () => { // logout and reset the users data.
    let user = this;

    this.setState({
      transitionOut: true
    });

    setTimeout(function() { // let the app animate out before logging out.
      user.setState({
        loggedIn: false,
        userData: {},
        activePage: "invoices",
        invoiceMode: "view",
        activeUser: ""
      });
    }, 1500);
  }

  setActivePage = (page) => { // changing tabs
    let pageName = page.target.innerHTML.toLowerCase().replace(/\s/g, '');
    let app = this;

    if(pageName !== "invoices") { // change view mode back to defaults if not within invoices.
      setTimeout(function() {
        app.setActiveModeView();
      }, 500);
    }else {
      app.setActiveModeView("invoices");
    };

    this.setState({
      activePage: pageName
    });
  };


  createInvoice = idx => {
    console.log(UsersJSON[0].invoices[0]);

    this.setState(prevState => ({
      userData: {
        ...prevState.userData,
        invoices: [
          ...prevState.userData.invoices,
          {
            ...UsersJSON[0].invoices[0],
            invoiceID: idx + 1,
            date: Moment(new Date()).format("YYYY-MM-DD")
          }
        ]
      }
    }));
  };


  modifyInvoice = (userData, invoiceIdx, clientIdx, otherInputSelected, otherData) => (inputSelected) => { // editing specific invoice data and storing it back in state
    const app = this;
    let targetID, newVal;

    if(inputSelected !== undefined) {
      targetID = inputSelected.target.id;
      newVal = inputSelected.target.value;
    }else {
      switch(otherInputSelected) {
        case "billToEmail":
          targetID = otherInputSelected;
          newVal = otherData;
          break;

        case "fromEmail":
          targetID = otherInputSelected;
          newVal = otherData;
          break;

        default:
          console.warn("no other input selected to save to app state.");
      };
    }
    let newUserData = userData;

    function overwriteState() {
      app.setState({
        userData: newUserData
      });
    }

    switch(targetID) { // which input would you like to modify?
      case "invoiceName":
        newUserData.invoices[invoiceIdx].invoiceName = newVal;
        overwriteState();
        break;

      // BILL TO

      case "billToName":
        newUserData.invoices[invoiceIdx].toName = newVal;
        overwriteState();
        break;

      case "billToEmail":
        newUserData.invoices[invoiceIdx].toEmail = newVal;
        overwriteState();
        break;

      case "billToStreet":
        newUserData.invoices[invoiceIdx].toAddress.street = newVal;
        overwriteState();
        break;

      case "billToCityState":
        newUserData.invoices[invoiceIdx].toAddress.cityState = newVal;
        overwriteState();
        break;

      case "billToZip":
        newUserData.invoices[invoiceIdx].toAddress.zip = newVal;
        overwriteState();
        break;

      case "billToPhone":
        newUserData.invoices[invoiceIdx].toPhone = newVal;
        overwriteState();
        break;

      // FROM

      case "fromName":
        newUserData.invoices[invoiceIdx].fromName = newVal;
        overwriteState();
        break;

      case "fromEmail":
        newUserData.invoices[invoiceIdx].fromEmail = newVal;
        overwriteState();
        break;

      case "fromStreet":
        newUserData.invoices[invoiceIdx].fromAddress.street = newVal;
        overwriteState();
        break;

      case "fromCityState":
        newUserData.invoices[invoiceIdx].fromAddress.cityState = newVal;
        overwriteState();
        break;

      case "fromZip":
        newUserData.invoices[invoiceIdx].fromAddress.zip = newVal;
        overwriteState();
        break;

      case "fromPhone":
        newUserData.invoices[invoiceIdx].fromPhone = newVal;
        overwriteState();
        break;

      // DETAILS

      case "date":
        newUserData.invoices[invoiceIdx].date = newVal;
        overwriteState();
        break;

      case "description":
        newUserData.invoices[invoiceIdx].items.description = newVal;
        overwriteState();
        break;

      case "rate":
        newUserData.invoices[invoiceIdx].items.rate = newVal;
        overwriteState();
        break;

      case "qty":
        newUserData.invoices[invoiceIdx].items.qty = newVal;
        overwriteState();
        break;

      case "additionalDetails":
        newUserData.invoices[invoiceIdx].items.additionalDetails = newVal;
        overwriteState();
        break;

      default:
        console.warn("something went wrong... selected target input:");
        console.warn(targetID);
    }
  };


  deleteInvoice = (invoice, idx) => { // deletes an invoice
    let newUserData = this.state.userData;
    newUserData.invoices.splice(idx, 1);

    for(var x = 0; x < newUserData.invoices.length; x++) {
      newUserData.invoices[x].invoiceID = (x + 1).toString();
    }

    this.setState({
      userData: newUserData
    });
  }


  render() {
    let app = this.state;

    if(app.loggedIn) { // if logged in
      return (
        <div className="app">
          <Navigation
            activeUser={app.activeUser}
            setActivePage={this.setActivePage}
            activePage={app.activePage}
            appData={app.appData}
            logout={this.logout}
          />
          <Pages
            setActiveModeView={this.setActiveModeView}
            setActiveModeEdit={this.setActiveModeEdit}
            invoiceMode={app.invoiceMode}
            activePage={app.activePage}
            appData={app.appData}
            transitionOut={app.transitionOut}
            userData={app.userData}
            createInvoice={this.createInvoice}
            modifyInvoice={this.modifyInvoice}
            deleteInvoice={this.deleteInvoice}
          />
        </div>
      );
    }else { // if not logged in
      return (
        <div className="app">
          <LoginSignUp
            login={this.login}
            users={app.users}
          />
        </div>
      );
    }
  }
}


      case "billToStreet":
        newUserData.invoices[invoiceIdx].toAddress.street = newVal;
        overwriteState();
        break;

      case "billToStreet":
        newUserData.invoices[invoiceIdx].toAddress = { ...newUserData.invoices[invoiceIdx].toAddress, street: newVal };
        overwriteState();
        break;