当<a> is clicked

Question

Task: add +1 to willWatch when <a> is clicked. I have an error when <a> is clicked, because MovieItem is not a component. I try to set class MovieItem... but I have a problem with moviesData

import React, { Component } from "react";
import { moviesData } from "../moviesData"; 

function MovieItem(props) {
    let {info : { id, vote_count , video, vote_average, title, popularity, poster_path, original_language, original_title ,backdrop_path, adult, overview} } = props;

    return (
            <div className="col" id={id} style={{width: "18rem"}}>
                <img className="card-img-top" src={'https://image.tmdb.org/t/p/w500' + poster_path}
                     alt="Card image cap"/>
                <div className="card-body">
                    <h5 className="card-title">Оригинальное название: {original_title}</h5>
                    <h5 className="card-title">Название: {title}</h5>
                    <p className="card-text">{overview}</p>
                    <p className="card-text">Рейтинг: {vote_average}</p>
                    <p className="card-text">Популярность: {popularity}</p>
                    <p className="card-text">Наличие видео: {video}</p>
                    <p className="card-text">Оригинальный язык: {original_language}</p>
                    <p className="card-text">Возраст 18+: {adult}</p>
                    <p className="card-text">backdrop_path {backdrop_path}</p>
                    <p className="card-text">Голоса: {vote_count}</p>

                    <a
                        // onClick={this.props.counter}
                        href="#"
                        className="btn btn-primary">Will Watch
                    </a>
                </div>
            </div>
        )
    }

class App extends Component {
    constructor(state) {
        super(state);
        this.state = {
            willWatch: 0
        };
        this.counter = this.counter.bind(this)
    }

    counter(e) {
        e.preventDefault();
        this.state.willWatch = this.state.willWatch + 1
    }

    render() {
        return (
            <div className="container">
                <div className="col-12">
                    <div className="row">
                        <div className="col-9">
                            <div className="row">
                                {
                                    moviesData.map((props) => {
                                        return <MovieItem info={props} counter={this.counter}/>
                                    })
                                }
                            </div>
                        </div>
                        <div className="col-3 sidebar">
                            <div className="row">
                                <p> Хочу посмотреть, фильмов: {this.state.willWatch} </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default App;

Answer 1

永远不要直接更改/设置this.state值。
否则，React将不知道状态是否已更改。
（有关详细信息，请参见this article。

所以不是直接更新willWatch，

counter(e) {
    e.preventDefault();
    this.state.willWatch = this.state.willWatch + 1
}

使用setState

counter(e) {
    e.preventDefault();
    this.state(prevState => ({willWatch: prevState.willWatch + 1}));
}

Answer 2

首先，您必须像这样破坏道具的数量：

function MovieItem(props) {
    let {info : { id, vote_count , video, vote_average, title, popularity, poster_path, original_language, original_title ,backdrop_path, adult, overview}, counter } = props;

    return (
            <div className="col" id={id} style={{width: "18rem"}}>
                <img className="card-img-top" src={'https://image.tmdb.org/t/p/w500' + poster_path}
                     alt="Card image cap"/>
                <div className="card-body">
                    <h5 className="card-title">Оригинальное название: {original_title}</h5>
                    <h5 className="card-title">Название: {title}</h5>
                    <p className="card-text">{overview}</p>
                    <p className="card-text">Рейтинг: {vote_average}</p>
                    <p className="card-text">Популярность: {popularity}</p>
                    <p className="card-text">Наличие видео: {video}</p>
                    <p className="card-text">Оригинальный язык: {original_language}</p>
                    <p className="card-text">Возраст 18+: {adult}</p>
                    <p className="card-text">backdrop_path {backdrop_path}</p>
                    <p className="card-text">Голоса: {vote_count}</p>

                    <a
                        onClick={counter}
                        href="#"
                        className="btn btn-primary">Will Watch
                    </a>
                </div>
            </div>
        )
    }

还有一点，您必须使用setState函数设置状态：

counter(e) {
    e.preventDefault();
    this.setState((prevState) => {
        return {
          willWatch: state.willWatch + 1
        }
    });
}