React、Reduxクリックして項目を削除すると、すべての項目が削除されます

Question

私はこれについて新鮮な目を必要とします。私がゆっくりとReactとReduxを学んでいるとき、私はもう一度ロードブロックに入った。

/actions/items.js 

export const DELETE_ITEM = "DELETE_ITEM" 
export function deleteItem(id) { 
    return { 
    type: DELETE_ITEM, 
    id 
    } 
} 

/components/Item.jsx

export default class Item extends React.Component { 

renderDelete =() => { 
    return <button onClick={this.props.onDelete}>x</button> 
    }; 

    renderItem =() => { 
    const onDelete = this.props.onDelete 

    return (
     <div onClick={this.edit}> 
     <span>{this.props.text}</span> {onDelete ? this.renderDelete() : null} 
     </div> 
    ) 
    } 

/components/Items.jsx

export default class Items extends React.Component { 


    handleOnDelete = (id) => { 
    this.props.dispatch(actions.deleteItem(id)) 
    } 

    render() { 
    const {items, onEdit, onDelete } = this.props 

    return (
     <ul>{items.map(item => 
     <li key={item.id}> 
      <Item 
      id={item.id} 
      text={item.text} 
      onEdit={this.handleOnEdit} 
      onDelete={this.handleOnDelete.bind(null, item.id)} 
      /> 
     </li> 
    )}</ul> 
    ); 
    } 
} 

export default connect(
    state => ({ 
    items: state.items 
    }) 
)(Items) 

/reducers/items.js

case types.DELETE_ITEM: 
    const filteredItems = state.filter((item) => { 
    item.id !== action.id 
    }); 

    return filteredItems 

私はありません削除するにはxボタンをクリックしてくださいアイテムはそれらのすべてを削除します。助けを前もって感謝します

Answer 1

あなたはあなたのレデューサーのフィルターに値を返しません。

あなたはreturnを追加する必要があります

const filteredItems = state.filter((item) => { 
    return item.id !== action.id; 
}); 

またはショートバージョンを使用し、ブラケットなし：

const filteredItems = state.filter((item) => item.id !== action.id);