javascript - 如何使用 React 一次更新单个元素而不是所有元素的投票计数器

Question

新手开发人员学习 React。

我正在尝试在 React 中为博客文章创建一个投票功能，但是当我点击投票按钮时，我会立即对所有博客明信片而不是单个卡片进行投票。

我该如何解决这个问题？我相信问题可能出在我设置 setState 的方式上？但我可能错了，正在寻求帮助。

提前致谢!

====

class Posts extends Component {

    state= {
        points: 0
    }


    componentDidMount() {
        this.props.fetchPosts()
    }

    UNSAFE_componentWillReceiveProps(nextProps) {
        if (nextProps.newPost) {
          this.props.posts.unshift(nextProps.newPost);
        }
      }


    handleClick = () => {
        this.setState({points: this.state.points + 1})
    }

    render() {

        const postItems = this.props.posts.map((post, index) => (

            <div key={index} className="ui three stackable cards">
                <div className="ui card">
                    <div className="content">
                        <div className="header">{post.title}</div>
                        <div className="meta"> {post.author}</div>
                        <div className="description">
                        <p>{post.body}</p>
                        </div>
                    </div>
                    <div className="extra content">
                        <i className="check icon"></i>
                        {this.state.points} Votes
                    </div>
                    <button className="ui button" 
                        type="submit" 
                        onClick={this.handleClick}>Add Point</button>
                </div>
            </div>

        ))

        return (
            <div>
                <br />
                <h2 className="ui header">
                    <i className="pencil alternate icon"></i>
                <div className="content">
                    Blog Feed
                    <div className="sub header"><a href="/posts/new">Create New Post!</a></div>
                </div>
                </h2>
                {postItems}
            </div>
        )
    }
}

Answer 1

您有一个组件存储所有帖子的“积分”状态。要实现您描述的功能，每个帖子都应该是具有自己状态的自己的组件。

class Post extends Component {

    state = {
        points: 0
    }

    handleClick = () => {
        this.setState({points: this.state.points + 1})
    }

    render = () =>
        <div key={index} className="ui three stackable cards">
                <div className="ui card">
                    <div className="content">
                        <div className="header">{this.props.title}</div>
                        <div className="meta"> {this.props.author}</div>
                        <div className="description">
                        <p>{this.props.body}</p>
                        </div>
                    </div>
                    <div className="extra content">
                        <i className="check icon"></i>
                        {this.state.points} Votes
                    </div>
                    <button className="ui button" 
                        type="submit" 
                        onClick={this.handleClick}>Add Point</button>
                </div>
            </div>
    }
}