Question

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

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

我一直在寻找，但还没有找到一个好的解决方案。我希望有人能帮助我理解和/或指出我正确的方向。

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

这是我的初始状态：

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
}}

Answer 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>);

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

1 个答案: