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

Question

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

这是问题：当我单击项目上的删除按钮时，该项目的输入文本将被删除，但不会删除upvotes或downvotes。 upvotes和downvotes总是从数组中的最后一项中删除。因此，当重新呈现列表时，投票变得混乱。

我已经包含了我的父组件（Category）和子组件（Item）中的代码。很抱歉，如果这是很多代码，但我很难找到问题的根源。

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>
    )
  }
}

Answer 1

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

你的父母状态会是这样的

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

handleUpvote和handleDownvote应该在你的Category组件上，并通过道具传递到你的Item，这将称他们通过该项目。

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