时间戳

首页 > 解决方案 > 待办事项列表：删除按钮从错误的列表项中删除信息

reactjs - 待办事项列表：删除按钮从错误的列表项中删除信息

问题描述

我正在创建一个基本的 React 应用程序，它本质上是一个待办事项列表。用户可以输入文本并将项目添加到列表中，该列表是使用 map 方法呈现的数组。每个项目都可以被赞成、反对或删除。输入文本、赞成票数和反对票数显示在每个项目上。

这就是问题所在：当我单击某个项目上的删除按钮时，该项目的输入文本被删除，但赞成票或反对票不会被删除。upvotes 和 downvotes 总是从数组中的最后一项中删除。因此，当重新渲染列表时，投票变得混杂在一起。

我已经包含了来自我的父组件（类别）和子组件（项目）的代码。抱歉，如果代码很多，但我无法确定问题的根源。

class Category extends Component {
  state = {
    inputValue: '',
    items: this.props.items,
  };

  handleSubmit = e => {
    e.preventDefault();
    this.setState({ items: this.state.items.concat(this.state.inputValue) })
    this.setState({ inputValue: "" })
  }
  updateInputValue(evt) {
    this.setState({
      inputValue: evt.target.value
    });
  }
  handleDelete = index => {
    const newItems = this.state.items.filter((item, i) => {
      return index !== i;
    });
    return this.setState({ items: newItems });
  }

  render() {
    return (
      <div className="category">
        <h2>{this.props.name}</h2>
        <form onSubmit={this.handleSubmit}>
          <input value={this.state.inputValue} onChange={e => this.updateInputValue(e)}/>
          <button type="submit">Submit</button>
        </form> 
        {/* Enter all items: */}
        {this.state.items.length > 0 ? 
          this.state.items.map((item, index) => {
            const key = index;
            return <Item 
              key={key} 
              text={item} 
              handleDelete={this.handleDelete.bind(this, index)}
            />
          }) : <p>There are no items here.</p>
        }
      </div>
    )
  }
}


class Item extends Component {
  state = {
    likes: 0,
    dislikes: 0
  }

  handleUpvote = () => {
    return this.setState({ likes: this.state.likes + 1 });
  }
  handleDownvote = () => {
    return this.setState({ dislikes: this.state.dislikes + 1 });
  }

  render() {
    return (
      <div className="item">
        <div className="move-item">
          <FontAwesomeIcon icon="chevron-left" />
        </div>
        <div className="item-content">
          <div className="item-text">
            <p>{this.props.text}</p>
          </div>
          <div className="item-actions">
            <div className="item-action-icon">
              <button onClick={this.handleUpvote}>
                <FontAwesomeIcon icon="thumbs-up" />
              </button>
              <span> {this.state.likes}</span>
            </div>
            <div className="item-action-icon">
              <button onClick={this.handleDownvote}>
                <FontAwesomeIcon icon="thumbs-down" />
              </button>
              <span> {this.state.dislikes}</span>
            </div>
            <div className="item-action-icon">
              <button onClick={this.props.handleDelete}>
                <FontAwesomeIcon icon="trash-alt" />
              </button>
            </div>
          </div>
        </div>
        <div className="move-item">
          <FontAwesomeIcon icon="chevron-right" />
        </div>
      </div>
    )
  }
}

标签： reactjs

解决方案

您需要提升喜欢/不喜欢的状态以与每个项目相关联。否则，每一项都会按位置关联（AKA 索引），一旦你删除一项，消失的索引就是最后一项，导致你搞砸了选票

你的父母状态会像

items: this.props.items.map(item => ({ item, likes: 0, dislikes. 0 });

handleUpvote并且handleDownvote应该在您的Category组件上，并通过道具传递给您的Item，这将调用它们传递项目。

这样你就可以更新你的喜欢/不喜欢

推荐阅读