Question

我在customers中有一个state数组

state = {
    clearable: true,
    addItem: {
      name: '',
      age: '',
      customers: [{ name: '', total: 0, prices: 0 }]
    }

现在在下面的函数中，我正在为阵列客户设置状态，但是，当我在设置状态后进行控制台操作时，它将继续提供默认值。

function handleCustomer(event) {
  let customer_details = [...this.state.addItem.customers]
  this.setState({
    price: event.target.value,
    total: event.target.value * event.target.value
  },
    () => {
      customer_details.push({
        name: 'Customer',
        price: this.state.price,
        total: this.state.total,
      })
      this.setState({ customer_details });
    });
}

当我管理该阵列客户时，我会不断获得默认值。我如何设置状态为阵列客户的新值。

请问我做错了什么？

PS：我从其他解决方案中获得了一些想法，但是我没有在上面的代码中看到任何错误

Answer 1

您应该输入代码：

function handleCustomer(event)
{
  const customer_details = [...this.state.addItem.customers],
        price = event.target.value,
        total = price * price
  this.setState({ 
      addItem: { 
         ...this.state.addItem,
         customer_details: [ ...customer_details, {
           name: 'Customer',
           price,
           total,              
        }]
      }
  });
}

Answer 2

据我所知，必须完全重写。
试试这个：

function handleCustomer(event) {
  let customers = [...this.state.addItem.customers];
  customers.push({
    name: 'Customer',
    price: event.target.value,
    total: event.target.value * event.target.value
  });
  this.setState({
    addItem: { customers }
  });
}

首先，我正在创建数组的副本。接下来，推送新元素。我现在可以通过复制嵌套来更新状态。

这是另一个使用单个语句的版本：

function handleCustomer(event) {
  this.setState({
    addItem: {
      customers: [
        ...this.state.addItem.customers,
        {
          name: "Customer",
          price: event.target.value,
          total: event.target.value * event.target.value
        }
      ]
    }
  });
};

Answer 3

显然，您的customer_details是一个数组而不是对象，仅传递该数组不会将该值应用于您状态下的任何属性。

尝试

this.setState({addItem:{customers : [...customer_details]}})

它将使用新值更新customers中的状态addItem属性

将数据保存到状态中的数组-React JS

3 个答案: