Question

我的主要状态：

this.state = {
  list: []
}

我有一个表单w / c需要2个单独的参数：listItem和quantity

 render () {
    return (
      <div>
        {this.state.error && <p>{this.state.error}</p>}
        <form onSubmit={this.handleAddOption}>
           <input type="text" placeholder="description" name="description" /> <br/>
           <input type="number" placeholder="quantity" name="quantity" />  <br/><br/>
           <button>Add Grocery</button>
        </form>
      </div>
    );
  }
}

所以基本上这两种表格都被提交到handleAddOption函数：

handleAddOption(description, quantity){
    if (!description && !quantity) {
      return 'Enter valid description and quantity to add item';
    } else if (this.state.list.indexOf(description) > -1) {
      // must update the quantity
    }

    this.setState((prevState) => ({
      list: prevState.list.concat(description, quantity)
    }));
  }

所以基本上这个列表是一个数组。我想在这里做两件事：
1.我需要将这两个添加到我的主数组列表状态并在屏幕上并排渲染它们，如：

  item1 1
  item2 2

截至目前，由于我需要稍后更新数量，因此我只会将文字连接起来，因为我不需要更新数量。

我想找到一种方法来更新数量，如果相同的描述放在表格上，例如：

第一输入： item1 1

第二输入： item1 5

因此必须将item1数量更新为5

知道如何处理这件事吗？

Answer 1

为了将信息保存到数组中，我们需要弄清楚数组内部描述的位置。

您在示例中使用了concat函数。此函数将两个项添加到数组中，但作为单独的条目。我建议您将信息保存到字典中，这会将值组合到一个条目中。在JavaScript中，我们可以使用对象执行此操作：

prevState.list.push({
    description: description,
    quantity:    quantity
});

为了从对象中获取描述，我们使用点符号。我们将对象保存到变量，让它命名为条目，并访问如下描述：

entry.description

为了使这项工作，我们应该稍微改变一下这个功能。由于我们无法检查是否存在值，因此我们需要遍历列表的条目。当我们这样做时，我们必须检查描述是否匹配，如果没有，我们添加新条目

handleAddOption(description, quantity){
    var hasBeenFound = false;

    prevState.list.forEach(function (entry) {
        if (entry.description === description) {
            hasBeenFound = true;
            entry.quantity = quantity;
        }
    });

    if (!hasBeenFound) {
        elements.push({description: description, quantity: quantity})
    }
}

我希望我的描述有点意义，并且你能够继续。

Answer 2

你的handleAddOption函数就像这样编辑。

handleAddOption = (e) => {
    e.preventDefault();
    let description = e.target[0].value;
    let quantity = e.target[1].value;

    if (!description && !quantity) {
      return 'Enter valid description and quantity to add item';
    } else {
        const list = this.state.list.map((el, i) => {
            if (el.indexOf(description) > -1) {
            // must update the quantity
            }
            return (el)
        });
    }    
    this.setState((prevState, props) => ({
      list: prevState.list.concat(description + ' ' + quantity)
    }));
}

当第一项相同时更新第二项 - reactjs

2 个答案: