Реагировать на вопрос о создании удаления функциональности

Question

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

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

В этом компоненте я создаю метод с именем displayFood, в котором я беру массив из реквизита, в котором есть строковые значенияназвания продуктов, которые пользователь хотел добавить в холодильник.Например: [йогурт, молоко, яйцо, йогурт, йогурт].Затем я создаю объект, который отображает этот массив на пары значений ключей на основе имени и количества, например: {"йогурт": 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;

Answer 1

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

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

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

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