Question

我正在创建一个基本的React应用程序，它实际上是一个待办事项列表。用户可以输入文本并将一个项目添加到列表，该列表是使用map方法呈现的数组。可以对每个项目进行表决，表决或删除。每个项目上都会显示输入的文本，支持的数量和支持的数量。

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

我已经包含了父组件（类别）和子组件（项目）的代码。抱歉，如果有很多代码，但是我在查明问题根源时遇到了麻烦。

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，这将使他们通过该物品。

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

待办事项：删除按钮可从错误的清单项目中删除信息

1 个答案: