Блог

Это немного затянуто.

Я хотел бы получить совет о том, как создать функциональность кнопки удаления. Я относительно новичок в react и должен был спланировать этот проект до того, как приступил. В любом случае, я сейчас здесь и ищу несколько советов, прежде чем я удалю функциональность завтра.

В этом компоненте я создаю метод под названием «displayFood», в котором я беру массив из props, содержащий строковые значения названий продуктов, которые пользователь хотел добавить в холодильник. Например: [йогурт, молоко, яйцо, простокваша, йогурт]. Затем я создаю объект, который сопоставляет этот массив парам ключ-значение на основе имени и количества, например: {«йогурт»: 3, «молоко»: 1, «яйцо»: 1}. После этого я создаю массив, содержащий то, что я хочу отобразить пользователю, то есть каждый элемент, который они кладут в холодильник, и количество этого элемента. У меня также есть кнопка удаления. Я думал о том, как удалить элементы, но не знаю, как это сделать.

Если, например, пользователь удаляет йогурт, я хочу, чтобы значение уменьшилось на единицу, и если пользователь удаляет элемент с количеством 1, то он должен исчезнуть.

Это довольно конкретный вопрос, спасибо за ваше время.

 import React from 'react';
import "./style.scss";

function InFrige(props) {

  const handleRemove = (e, counts) => {
    console.log(e.target.name)
  }

  const displayFood = () => {
     var counts = {};
    props.foodAddedByUser.forEach(function(x) { counts[x] = (counts[x] || 0)   1; });

    let foodItems = []
    for(var index in Object.entries(counts)){
        foodItems.push(
           <div className="inFrige-food-item" key={index}>
            <h3>{Object.keys(counts)[index]} x{Object.values(counts)[index]}</h3>
             <button onClick={handleRemove} name={Object.keys(counts)[index]}>Remove</button>
           </div>
         )
    }
  return foodItems
  }

  return (
    <div>
      <div className="inFrige-food-container">
          {displayFood()}
      </div>
    </div>
  )
 }

 export default InFrige;
  

Ваша проблема в том, что вы пытаетесь изменить свои реквизиты внутри компонента. Вы могли бы либо обработать это внутри компонента с помощью state, либо выполнить обратный вызов через props из родительского компонента и обработать удаление там, что-то вроде этого:

 <button onClick={()=>{this.props.handleRemove(Object.keys(counts)[index])}} name={Object.keys(counts)[index]}>Remove</button>
  

в родительском рендеринге:

 <InFridge handleRemove={(item)=>{foodAddedByUser.delete(item)} foodAddedByUser={foodAddedByUser} />