Question

我正在使用react和redux创建一个简单的待办事项列表。我正在映射我的项目，但由于某种原因，我的onClick操作将只删除索引为0以外的项目。所以我可以删除我添加到我的列表中的第二项，但是，我之前无法删除项目。这是我的代码。

class TaskList extends React.Component {
    render() {
        return(
            <div>
                {this.props.tasks.map((task, taskId) => {
                    console.log("task", task)
                    console.log("id", taskId)
                    return (
                        <div key={taskId}>
                            {task}
                            <button onClick={() => this.props.deleteTask(taskId)}>Delete</button>
                        </div>
                    )
                })}
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        tasks: state.tasks
    }
}

function dispatchStateToProps(dispatch) {
    return bindActionCreators({deleteTask: deleteTask}, dispatch);
}

export default connect(mapStateToProps, dispatchStateToProps)(TaskList)

const taskReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TASK': 
    state = state.concat(action.payload)
    break;
    case 'DELETE_TASK':
    state = state.splice(action.payload, 1)
    break;
  }
  return state
}

Answer 1

有两件事是错的。

你使用数组中项目的索引作为键，而不是你应该为你创建的每个待办事项生成一个id，然后按照这个state.filter(todo => todo.id !== action.payload)对该ID进行过滤，这在{{3 }和article（键部分）。

另一件事是splice方法不是纯粹的，因为它改变了它所调用的数组的内容，你似乎也认为这个方法在实际返回带有被删除元素的数组时返回剩余元素的数组。

那么当您删除第二个元素时会发生什么：

splice方法返回包含已删除元素的数组你存储在你的州。
稍后TaskList会收到仅包含已删除的数组元件。
render TaskList方法返回包含一个React的数组元素用键0，键没有改变所以对帐算法不会更新React Component，所以视图为第一个div不会改变，以下div被删除。

React Redux Splice仅删除索引为0的元素

1 个答案: