React/Redux 需要帮助从表中删除项目答案

【问题标题】：React/Redux need help removing items from a tableReact/Redux 需要帮助从表中删除项目
【发布时间】：2018-03-08 04:46:18
【问题描述】：

这是一个超级菜鸟问题，我正在学习 redux 及其功能。但是，我在尝试从列表中删除项目时被卡住了。此列表通过我导入的 JSON 对象添加到其中的项目，然后将其推送到我稍后循环遍历的数组中。

在一个组件中，我通过单击按钮添加价格（模拟数据），并且我有一个总（价格总和）工作。此操作还会将该名称添加到侧列表中。

我一直在寻找，但没有找到好的解决方案。我希望这里有人可以帮助我理解和/或为我指明正确的方向。

到目前为止，当我单击按钮时，它会在列表中添加一个空按钮，而不是删除。如果我错了，请纠正我，但这是 slice 函数的预期行为，返回一个数组？

这是我的初始状态：

const initialState = [{   
    name: '',
    total: '',
}]

我的动作类型：

case ActionTypes.REMOVE_EXAMS:
       return[
            ...state[0].name.slice(0, action.index),
            ...state[0].name.slice(action.index + 1)
        ]

case ActionTypes.ADD_PRICES:
        return   [
        { 
            total: Number(state[0].total + action.price),
            name: action.name
         }
        ]

这是一个呈现包含所有已添加项目的侧列表的组件。我的想法是按下按钮并从此侧列表中永久删除该项目

static propTypes = {
    dataCarryName: PropTypes.string.isRequired,
    removeExams: PropTypes.func.isRequired,
    total: PropTypes.string.isRequired,
};

constructor(props) {
    super(props);
    this.names = [];
}

render() {

    {this.names.push(this.props.dataCarryName)}
    {console.log(this.names)}
    return (
        <MuiThemeProvider>
         <div className="side-exam-view">
         <Paper zDepth={2}>
            <h1> Carrito </h1>
            {this.props.total}
            {this.names.map((i, k) => {
                return(
                    <ul key={k}
                         className="exam-list-names">
                        <li key={k}>
                        <button onClick={() => this.props.removeExams(( i.length, {i}))}> {i} - X</button>
                        </li>
                        <Divider />
                    </ul>
                )
            })}
        </Paper>
    </div>
    </MuiThemeProvider>
    );      
}}

更新： 这些是我的动作创建者：

export const addPrices = (price, name) => {
return{
    type: ActionTypes.ADD_PRICES,
    price,
    name
}}
export const removeExams = (index, name) => {
return {
    type: ActionTypes.REMOVE_EXAMS,
    index,
    name
}}

【问题讨论】：

您尚未展示您的 removeExams 动作创建者的外观，这可能会有所帮助。
@Samo 刚刚添加了它们，对此感到抱歉。希望这能提供更多见解

标签： javascript reactjs redux react-redux

【解决方案1】：

好的。我在这里至少看到了几个问题，希望处理它们能帮助您解决问题。

首先，我不确定您保留总金额的方式是否合理。我认为您真正想要做的是维护一份考试清单，其中每项考试都有名称和价格。您还希望能够显示考试名称列表以及价格总和。所以对于初学者来说，我认为你的减速器应该看起来更像这样。

const initialState = [];

export default function reduce(state = initialState, action) {
  switch (action.type) {
    case ActionTypes.ADD_EXAM:
      return state.concat({ name: action.name, price: action.price });
    case ActionTypes.REMOVE_EXAM:
      return state.filter(exam => exam.name === action.name)
    default:
      return state;
  }
}

所以ADD_EXAM 会在您的数组中添加一个带有名称和价格的新条目，然后REMOVE_EXAM 会查找action.name 指定的考试并将其过滤掉。

您可以像这样轻松地显示您的总和：

const sum = exams.reduce((sum, exam) => sum + exam.price, 0);

你可以这样显示你的名字：

const names = exams.map((exam, index) => <p key={index}>{exam.name}</p>);

【讨论】：