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