Блог

Главная - Вопросы по программированию - Мне нужен код для удаления любого конкретного заказа с помощью кнопки удаления со страницы заказов проекта burger builder React

Мне нужен код для удаления любого конкретного заказа с помощью кнопки удаления со страницы заказов проекта burger builder React

#javascript #reactjs

#javascript #reactjs

Вопрос:

Этот фрагмент содержит код для отображения каждого заказа на странице заказов.

импортируйте React из ‘react’;

 import classes from './Order.css';

const order = ( props ) => {
const ingredients = [];

for (let ingredientName in props.ingredients) {
    ingredients.push(
        {
            name: ingredientName,
            amount: props.ingredients[ingredientName]
        }
    );
}

const ingredientOutput = ingredients.map(ig => {
    return <span
        style={{
            textTransform: 'capitalize',
            display: 'inline-block',
            margin: '0 8px',
            border: '1px solid #ccc',
            padding: '5px'
            }}
        key={ig.name}>{ig.name} ({ig.amount})</span>;
});

В этом фрагменте показаны ингредиенты для бургеров и цена для каждого заказа:

 return (
    <div className={classes.Order}>
        <p>Ingredients: {ingredientOutput}</p>
        <p>Price: <strong>USD {Number.parseFloat(props.price).toFixed(2)}</strong></p>

        // I want my button below to delete the particular order

        <button>Delete order</button>
    </div>
  );
};

export default order;

Комментарии:

1. Нет, мы не собираемся писать ваш код за вас. Приложите некоторые усилия самостоятельно.

2. это академический курс Максимилиана?

3. Да, это тот же курс @Alioshr

4. как объяснил @JGrenet, это то мышление, которое вы должны иметь здесь. Просто имейте в виду, что вы должны делать это неизменяемым образом, без изменения состояния. рассматривайте методы filter() или slice() как подсказку для вашего управления состоянием здесь.

5. Если у вас возникли трудности здесь, это должно быть признаком того, что вам нужно вернуться к основам языка. Очень важно понимать Js и продолжать углубляться в сам язык, прежде чем переходить к библиотекам или фреймворкам. Мне потребовалось некоторое страдание, чтобы осознать это

Ответ №1:

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

Исходя из этого, у вас должна быть функция, которая удаляет этот конкретный список ингредиентов в вашем родительском компоненте. Затем вы вводите эту функцию в свой Order компонент prop, как вы сделали для своего ingredient prop.

Затем вам просто нужно вызвать эту функцию в событии onClick вашей кнопки следующим образом:

  <button onClick={this.props.removeOrder}>Delete order</button>

Если ваши заказы сгруппированы по заказам в массиве orders, просто введите функцию в дочерние реквизиты с индексом заказа. Затем ваша функция на вашей родительской стороне, которая удаляет order, должна принять orderIndex в качестве аргумента и удалить этот конкретный индекс в вашем массиве orders.

Комментарии:

1. deleteOrder = () => { return{ингредиенты: [] } } return ( <div className={классы. Заказ}> <p> Ингредиенты: {ingredientOutput}</p> <p>Цена: <strong> USD {Number.parseFloat(props.price ).toFixed( 2)}</strong></p> <кнопка onClick={this.props.deleteOrder}> Удалить заказ</button> </div>); };

2. ‘deleteOrder’ не определен без undef. Я получаю эту ошибку

3. Вы должны поместить свою deleteOrder функцию в свой родительский компонент и внедрить ее в свой компонент Order , поскольку ваш список ингредиентов также введен в props. Ваш код «должен» работать здесь, если вы вызываете свой deleteOrder непосредственно в вашем событии onClick, вызывая его с помощью deleteOrder direcly, а не с помощью объекта props, поскольку ваша deleteOrder функция не является частью вашего компонента props. Основная проблема здесь в том, что вы не можете изменять реквизиты напрямую, это полностью запрещено фреймворком, поскольку это может привести к нестабильности и сбоям.

4. Если вы не понимаете, о чем я здесь говорю, я призываю вас, как сказал @Alioshr, вернуться к основам и не записывать шаги слишком быстро. Программирование требует терпения, практики и пошагового обучения. Удачи, приятель 🙂