Edytowanie listy w aplikacji przy pomocy AppContext - react

Question

Cześć, 

mam pytanie ponieważ mam problem podczas tworzenia aplikacji. Chciałbym edytować pojedynczą listę w aplikacji budżetowej,

ale nie mam pojęcia w jaki sposób mogę to zrobić i potrzebuje wskazówki.

// ExpenseItem

import React, { useContext } from 'react';
import { TiDelete } from 'react-icons/ti';
import { TiPencil } from 'react-icons/ti';
import { AppContext } from '../context/AppContext';


const ExpenseItem = (props) => {

    const { dispatch } = useContext(AppContext);

    const handleDeleteExpense = () => {
        dispatch({
            type: 'DELETE_EXPENSE',
            payload: props.id,
        })
    }

    const handleEditExpense = () => {
        dispatch({
            type: 'EDIT_EXPENSE',
            payload: props.id,
        })
    }

    return (
        <li className='list-group-item d-flex justify-content-between align-items-center mt-4 me-4'>
            {props.name}
            <div>
                <span className='badge bg-primary badge-pill me-4'>
                    ${props.cost}
                </span>
                <TiPencil className='me-2' size='1.5em' onClick={handleEditExpense}></TiPencil>
                <TiDelete size='1.5em' onClick={handleDeleteExpense}></TiDelete>
            </div>
        </li>
    )
};

export default ExpenseItem;

// AppContext

import { createContext, useReducer } from "react";

const AppReducer = (state, action) => {
    switch(action.type){
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            }
        case 'ADD_INCOME':
            return {
                ...state,
                incomes: [...state.incomes, action.payload],
            }
        case 'DELETE_EXPENSE':
            return {
                ...state,
                expenses: state.expenses.filter((expense) => expense.id !== action.payload)
            }
        case 'DELETE_INCOME':
            return {
                ...state,
                incomes: state.incomes.filter((incomes) => incomes.id !== action.payload)
            }
        case 'EDIT_EXPENSE':
            return {
                
            }
        default:
            return state;
    }
}

const initailState = {
    budget: 0,
    expenses: [
        // { id: 2, name: 'shopping', cost: 40 },
    ],
    incomes: [

    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initailState);
    
    return (
        <AppContext.Provider value={{
            budget: state.budget,
            expenses: state.expenses,
            incomes: state.incomes,
            dispatch,
        }}
    >
        {props.children}
    </AppContext.Provider>)
}

Jeśli ktoś będzie chciał to podam również link do repozytorium.

Z góry dziękuję za pomoc.

Answer 1

Zakładam, że chodzi Ci o nieuzupełniony case 'EDIT_EXPENSE'. Chcąc edytować któryś element w tablicy - albo raczej podmienić jego wartość w nowym stanie, żeby go nie mutować - przekaż indeks tego elementu i odnieś się do niego po indeksie, albo użyj metody Array.prototype.findIndex, aby go znaleźć jego indeks po konkretnym propertisie (widzę, że w komponencie masz props.id, więc można skorzystać z tego). Potem wstaw w jego miejsce nowy obiekt. Albo wyfiltruj stary obiekt expense i w jego miejsce wstaw nowy (lub dopushuj na koniec tablicy).

Po funkcji handleEditExpense i parametrze props.id przekazywanym do dispatchera sądzę, że możesz zrobić coś w tym stylu:

const handleExitExpense = () => {
    dispatch({
        type: 'EDIT_EXPENSE',
        payload: {
             id: props.id,
             expenseToEdit: {} // <- tutaj przekaż nowe wartości dla edytowanego expense
        }
    })
}

// w AppReducer 

case 'EDIT_EXPENSE':
  const expenseIndexToEdit = 
      state.expenses.findIndex((expense) => expense.id === action.payload.id);
  const editedExpenses = /* kopiowanie state.expenses i zastąpienie w kopii edytowanego elementu expense */
      [...state.expenses].splice(expenseIndexToEdit, 1, action.payload.expenseToEdit);

  // alternatywnie można użyć `.filter()` by wyrzucić stary expense i potem dodać nowy

  return {
      ...state,
      expenses: editedExpenses
  }

 

Comments

Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

Elementy <input> są - jak wskazuje błąd - puste w środku.

Więc zapisy w stylu:

<input onChange={EditCost()} value={props.cost}>{props.cost}</input>

, zamień na:

<input onChange={EditCost()} value={props.cost} />

---

Wyświetla ten input, tylko teraz mam problem z tym, żeby edytować wartość tego inputu. Przy próbie wpisania wartości wyświetla cały czas "ww" i "22"

---

Tutaj dobrze będzie skopiować na starcie propsy (przekazywane do value) do zmiennych stanowych komponentu i aktualizować je w handlerze onChange.

Swoją drogą, radziłem Ci, abyś pozbył się nawiasów przy przekazywaniu funkcji do onChange handlera, ale w komentarzu wyżej przeoczyłem, że jeszcze tego nie zrobiłeś, więc moja propozycja błędnie te nawiasy zawiera.

---

W kodzie mam bez nawiasów. Nie bardzo wiem jak aktualizować stan, ponieważ pierwszy raz używam tego API Context, zaraz coś pomyślę i jak na nic nie wpadnę to dam znać.

---

import { createContext, useReducer } from "react";

const AppReducer = (state, action) => {
    switch(action.type){
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            }
        case 'ADD_INCOME':
            return {
                ...state,
                incomes: [...state.incomes, action.payload],
            }
        case 'DELETE_EXPENSE':
            return {
                ...state,
                expenses: state.expenses.filter((expense) => expense.id !== action.payload)
            }
        case 'DELETE_INCOME':
            return {
                ...state,
                incomes: state.incomes.filter((incomes) => incomes.id !== action.payload)
            }
        case 'EDIT_EXPENSE':
            const expenseIndexToEdit = 
            state.expenses.findIndex((expense) => expense.id === action.payload.id);
            const editedExpenses = /* kopiowanie state.expenses i zastąpienie w kopii edytowanego elementu expense */
                [...state.expenses].splice(expenseIndexToEdit, 1, action.payload.expenseToEdit);
            return {
                ...state,
                expenses: editedExpenses
            }
        default:
            return state;
    }
}

const initailState = {
    budget: 0,
    expenses: [
        // { id: 2, name: 'shopping', cost: 40 },
    ],
    incomes: [

    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initailState);
    
    return (
        <AppContext.Provider value={{
            budget: state.budget,
            expenses: state.expenses,
            incomes: state.incomes,
            dispatch,
        }}
    >
        {props.children}
    </AppContext.Provider>)
}

Muszę się jakoś odnieść do context? do expenses: state.expenses?