Question

我有一个名为“ itemSelection”的组件，另一个有名为“ Item”的组件

在itemSelection中，我只是通过这样的api响应进行映射

this.authService.login(this.email, this.password)
  .then(result => this.router.navigate(['dashboard']))
  .catch(err => {
    this.nativeElement = element.nativeElement;
    this.sidebarVisible = false;
  });

在“项目”组件中，我有一个带有选择按钮的3卡项目。在其状态下，还有“数量”键，但这是针对特定项目的用户选择的数量的。所以，我要在这里实现的是，如果用户选择了一个项目和数量为2，我想将其放入一个对象中并将该对象放入数组中，如果用户选择了另一个项目，数量为3，我希望在另一个对象中使用该对象，然后将该对象推入将第一个对象放入类似对象的数组中

<div className="row">
                {this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
            </div>

这是我尝试过的

[{name: first item, quantity: 2}, {name: second item, quantity: 3}]

上面的函数包含在“ Item.js”中，这是返回函数

targetValue = (e) => {
      e.preventDefault();
      let qua = e.target.textContent;
      this.setState({quantity: qua, selected: true});
      const newQuantity = {name: this.props.name, quantity: qua}
      const quantities = [...this.state.quantities];
      quantities.push(newQuantity);
      this.setState({quantities});
      console.log(quantities);
    }

Answer 1

您提出的问题还不清楚。但据我了解，可能有2个问题：

将const quantities = [...this.state.quantities];更改为let quantities = [...this.state.quantities];，因为您将向数组中推送新值。
let qua = e.target.textContent;不确定这是否是获取价值的最佳方法。尝试let qua = e.target.value;并在锚标记<a onClick={this.targetValue} value={i+1} key={i} href="#">{i + 1}</a>中传递值参数

共享您尝试的输出肯定会有助于更好地理解。

Answer 2

在React中将元素推送到状态数组的最佳方法。你可以做到

   const newQuantity = {name: this.props.name, quantity: qua};
   this.setState(previousState => ({
       quantities : [...previousState.quantities, newQuantity]
   }));

也不要在处理函数中使用多个setState，请使用足够的：）

将选择的元素推入一个对象

2 个答案: