刪除與TODO「TODO」

我有一個簡單的應用程序與react/redux構建。在我的「TODO」-app中，我可以添加項目並對其進行過濾。我只是按照this example。但我也嘗試添加一個實際刪除項目的方法，但它似乎不起作用。刪除與TODO「TODO」

操作：

let nextTodoId = 0 
export const addTodo = text => { 
    return { 
    type: 'ADD_TODO', 
    id: nextTodoId++, 
    text 
    } 
} 

export const setVisibilityFilter = filter => { 
    return { 
    type: 'SET_VISIBILITY_FILTER', 
    filter 
    } 
} 

export const toggleTodo = id => { 
    return { 
    type: 'TOGGLE_TODO', 
    id 
    } 
} 

export const deleteTodo = id => { 
    return { 
    type: 'DELETE_TODO', 
    id: id 
    } 
}

減速機：

const todos = (state = [], action) => { 
    switch (action.type) { 
    case 'ADD_TODO': 
     return [ 
     ...state, 
     { 
      id: action.id, 
      text: action.text, 
      completed: false 
     } 
     ]; 
    case 'TOGGLE_TODO': 
     return state.map(todo => 
      (todo.id === action.id) 
       ? {...todo, completed: !todo.completed} 
       : todo 
    ); 
    case 'DELETE_TODO': 
     return state.filter(todo => todo.id !== action.id); 
    default: 
     return state 
    } 
} 

export default todos

而且在我的容器：

import React from 'react' 
import {connect} from 'react-redux' 
import {deleteTodo} from '../actions' 

let RemoveTodo = ({dispatch}) => { 
    return (
     <div> 
     <a onClick={e => { 
      e.preventDefault() 
      // dispatch(deleteTodo()) 

      console.log(dispatch(deleteTodo())); 
     }}>Remove TODO</a> 
     </div> 
) 
} 

RemoveTodo = connect()(RemoveTodo) 

export default RemoveTodo

組件：

import React from 'react' 
import PropTypes from 'prop-types' 
import {connect} from 'react-redux' 
import RemoveTodo from '../containers/RemoveTodo' 

export default class Todo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state; 
    } 

    render() { 
    return (
     <li 
      onClick={this.props.onClick} 
      className="list-group-item justify-content-between border-c1 c1" 
     > 
      <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span> 
      <span className="badge c1-bg badge-pill"> 
      <RemoveTodo /> 
      </span> 
     </li> 
    ) 
    } 
} 

Todo.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired, 
    id: PropTypes.number.isRequired 
}

出於某種原因，我的「調度（deleteTodo（））」沒有找到ID ...當我登錄，我只是得到一個對象：類型：「DELETE_TODO」，ID：不確定。爲什麼？我在這裏錯過了什麼？我是新來的還原/反應。在此先感謝...

編輯：

當我通過在標識加入訊（deleteTodo（ID））我得到這個錯誤：

來源

2017-09-13 maverick

'訊（deleteTodo（）） '缺少'id'：'dispatch（deleteTodo（id））' –

你沒有通過這個ID .. –

@TomFenech我試過了，但後來我在控制檯中得到另一個錯誤，說「id沒有定義「或者其他什麼...... – maverick

您需要的待辦事項的id傳遞給RemoveTodo組件作爲一個道具，然後將它傳遞給動作的創造者像

render() { 
    return (
     <li 
      onClick={this.props.onClick} 
      className="list-group-item justify-content-between border-c1 c1" 
     > 
      <span>{this.props.text} {this.props.completed ? <i className="fa fa-check"/> : null}</span> 
      <span className="badge c1-bg badge-pill"> 
      <RemoveTodo id={this.props.id} /> 
      </span> 
     </li> 
    ) 
    }

然後

let RemoveTodo = ({id, dispatch}) => { 
    return (
     <div> 
     <a onClick={e => { 
      e.preventDefault() 
      dispatch(deleteTodo(id)) 

      //console.log(dispatch(deleteTodo(id))); 
     }}>Remove TODO</a> 
     </div> 
) 
}

來源

2017-09-13 12:21:22

非常感謝！工作出色！ – maverick

沒問題，很高興有幫助 –

你是不是經過id參數
此：
dispatch(deleteTodo())
應改爲這樣：
dispatch(deleteTodo(3))

編輯
作爲隨訪到您的評論和編輯，你應該通過一個有效的id值或變量已被定義當然。

來源

2017-09-13 12:06:36

我試過......但它只是說「id」沒有被定義......它只是在控制檯中記錄了更多的錯誤。 – maverick

你得到的其他錯誤是什麼？ –

我編輯了我的問題，看看:) – maverick

刪除與TODO「TODO」

回答

相關問題