时间戳

首页 > 解决方案 > 如何使用 Context API 在 React js 中删除列表

javascript - 如何使用 Context API 在 React js 中删除列表

问题描述

我有这段代码，我在其中使用reducer和context api。我已经编写了添加事务的减速器。但现在我也希望它删除列表项。如何将 Id 传递给 reducer 以删除特定数组？

TransactionContext.js

import React, { createContext, useReducer } from "react";
import TransactionReducer from "./TransactionReducer";

let initialTransactions = [
    {amount: 500,  desc: "Cash"},
    {amount: -40,  desc: "Book"},
    {amount: -200,  desc: "Camera"},

];

export const TransactionContext = createContext(initialTransactions);

export const TransactionProvider = ({ children }) => {
    let [state, dispatch] = useReducer(TransactionReducer, initialTransactions);

    function addTransaction(transObj) {
        dispatch({
            type: "ADD_TRANSACTION",
            payload: {
                amount: transObj.amount,
                desc: transObj.desc
            }
        })
    }

    return (
            <TransactionContext.Provider value={{
                transactions: state,
                addTransaction
            }}>
                {children}
            </TransactionContext.Provider>
    );
};

TransactionReducer.js

import React from "react";

const TransactionReducer = ((state, action) => {
    switch(action.type) {
        case "ADD_TRANSACTION":
            return [action.payload, ...state];
        case "DELETION":
            return [action.payload, ...state];
        default:
            return state;
    }
});

export default TransactionReducer;

TransactionHistory.js（显示项目列表的文件）

import React, { useContext } from "react";
import Divider from '@material-ui/core/Divider';
import Grid from '@material-ui/core/Grid';
import "../app/App.css"
import {TransactionContext} from "../../Hooks/TransactionContext";

const TransactionHistory = () => {

    let {transactions} = useContext(TransactionContext);


    function FormRow() {
        return (
            <React.Fragment>
                <Grid item xs={8}>
                    <br/>
                    <h3>History</h3>
                    <Divider />

                    <ul className="transaction-list">
                    {transactions.map((transObj, ind) => {
                        return (
                            <li key={ind}>
                                <span>{transObj.desc}</span>
                                <span>${transObj.amount}</span>
                            </li>
                        );
                    })}
                    </ul>

                </Grid>

            </React.Fragment>
        );
    }

    return (
        <div>
            <Grid container spacing={1}>
                <Grid container item xs={11} spacing={3}>
                    <FormRow />
                </Grid>
            </Grid>
        </div>
    );
}

export default TransactionHistory;

我已经在http://my-expense-trackerapp.surge.sh/上部署了网站，您可以查看它以供参考。谢谢你！

标签： javascriptreactjs

解决方案

我没有id在列表项中找到 。让我们假设他们有id

TransactionContext.js

    function deleteTransaction(transObj) {
        dispatch({
            type: "DELETION",
            payload: {
                index: transObj.index
            }
        })

TransactionReducer.js

const TransactionReducer = ((state, action) => {
    switch(action.type) {
        case "ADD_TRANSACTION":
            return [action.payload, ...state];
        case "DELETION":
            (state || []).splice(action.payload.index, 1)          
            return [...state];
        default:
            return state;
    }
});

推荐阅读