Обновить 2-й элемент, когда 1-й элемент такой же - reactjs
Мое основное состояние:
this.state = {
list: []
}
У меня есть форма w / c, которая принимает 2 отдельных аргумента: listItem и количество
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
На данный момент я только объединяю оба, поскольку текст w / c не является хорошей идеей, поскольку мне нужно обновить количество позже.
Я хочу найти способ обновить количество, если такое же описание было помещено в форму, например:
1-й вход: item1 1
2-й вход: item1 5
Таким образом, он должен обновить количество item1 до 5
Есть идеи, как я могу справиться с этим?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы сохранить информацию в массив, нам нужно выяснить расположение описания внутри массива.
В своем примере вы используете функцию 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})
}
}
Я надеюсь, что мое описание имело немного смысла и что вы можете продолжить.
prevState не определено
Отредактируйте вашу функцию 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)
}));
}
Есть ли причины, по которым вы не помещаете объекты типа
{description, quantity}в массивlistи не помещаете его как текст?