时间戳

首页 > 解决方案 > TypeError：inputs.lineItems 未定义 React

reactjs - TypeError：inputs.lineItems 未定义 React

问题描述

const [inputs, setInputs] = useState({
  taxRate: 0.00,
  lineItems: [
    {
      id: 'initial',
      name: '',
      description: '',
      quantity: 0,
      price: 0.00,
    },
  ]
});
 function handleInvoiceChange(e) {
    //setInputs(inputs => ({...inputs,[e.target.name]: e.target.value}));
    setInputs({[e.target.name]: e.target.value});
  }

const calcLineItemsTotal = (event) => {
  return inputs.lineItems.reduce((prev, cur) => (prev + (cur.quantity * cur.price)), 0)
}

  const calcTaxTotal = () => {
    return calcLineItemsTotal() + (inputs.taxRate / 100)
  }

这就是我处理变化的方式

const handleLineItemChange = (elementIndex) => (event) => {
    let lineItems = inputs.lineItems.map((item, i) => {
      if (elementIndex !== i) return item
      return {...item, [event.target.name]: event.target.value}
    })
    setInputs(inputs => ({...inputs,[lineItems]:lineItems}));
   //setInputs({lineItems})
  }

  const handleAddLineItem = (event) => {
    setInputs({

      lineItems: inputs.lineItems.concat(
        [{ id: uuidv4(), name: '', description: '', quantity: 0, price: 0.00 }]
      )
    })
  }



const handleRemoveLineItem = (elementIndex) => (event) => {
  
     setInputs({
          lineItems: inputs.lineItems.filter((item, i) => {
            return elementIndex !== i
          })
        })
      }

这是发票生成器的反应应用程序当我添加税率时出现问题然后我得到那个错误

标签： reactjs

解决方案

带有钩子的状态的更新值不会被合并而是被替换。

此外，如果您使用的是 v16 或更低版本的 react，请知道 Synthetic 事件是由 react 汇集的，即在状态回调运行之前清除事件对象。

Check here了解更多信息。

SyntheticEvent 对象是池化的。这意味着 SyntheticEvent 对象将被重用，并且在调用事件处理程序后所有属性都将被取消。

更新状态的正确方法如下，您可以使用函数方式更新状态并复制您需要的事件值，以分隔 setInputs 函数调用之外的变量

const name = e.target.name;
const value = e.target.value;
setInputs(inputs => ({...inputs,[name]: value}));

您的其余功能更新如下

 const handleAddLineItem = (event) => {
    setInputs(input => ({
      ...input,
      lineItems: inputs.lineItems.concat(
        [{ id: uuidv4(), name: '', description: '', quantity: 0, price: 0.00 }]
      )
    }));
  }



const handleRemoveLineItem = (elementIndex) => (event) => {
  
     setInputs(input =>({
          ...input,
          lineItems: inputs.lineItems.filter((item, i) => {
            return elementIndex !== i
          })
     }));
 }

推荐阅读