Question

在这里反应新手。我正在构建一个简单的投票应用程序，并且只需要工作，但还有一个剩余的项目。在下面的代码中，我得到了一个未被捕获的TypeError：无法读取属性＆＃39; state＆＃39;在投票＆＃39;未定义错误。我确定这是因为我的投票功能超出了数组项的范围，但我不知道如何编写代码来修复它。帮助赞赏。

class Ratings extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            votes: 0
        };
        this.add = this.add.bind(this);
        this.subtract = this.subtract.bind(this);
        this.reset = this.reset.bind(this);
    }
    add(event){
        this.setState ({
            votes: this.state.votes + 1
        })
    }
    subtract(event){
        this.setState ({
            votes: this.state.votes - 1
        })
    }
    reset(event){
        this.setState ({
            votes: 0
        })
    }
    render () {
        this.movies = this.props.list.map(x => {
            return (
                <div key={x.id} className="movierater">
                <MoviePoster poster={x.img}/>
                <h1 className="title">{x.name}</h1>
                    <div className="votewrapper">
                        <button onClick={this.add}><i className="votebutton fa fa-thumbs-o-up" aria-hidden="true"></i></button>
                        <Votes />
                        <button onClick={this.subtract}><i className="votebutton fa fa-thumbs-o-down" aria-hidden="true"></i></button>
                    </div>
                <button onClick={this.reset} className="reset">Reset</button>
                </div>
            )
        });
        return (
            <div>
                {this.movies}
            </div>
        );
    }
}

function MoviePoster(props) {
    return (
        <img src={props.poster} alt="Movie Poster" className="poster"/>
    );
}

function Votes(props) {
    return (
        <h2>Votes: {this.state.votes}</h2>
    );
}

var movieposters = [
    {id: 1, img:"http://www.impawards.com/2017/posters/med_alien_covenant_ver4.jpg", name: "Alien Covenant"},
    {id: 2, img:"http://www.impawards.com/2017/posters/med_atomic_blonde_ver4.jpg", name: "Atomic Blonde"},
    {id: 3, img:"http://www.impawards.com/2017/posters/med_easy_living_ver3.jpg", name: "Easy Living"},
    {id: 4, img:"http://www.impawards.com/2017/posters/med_once_upon_a_time_in_venice_ver3.jpg", name: "Once Upon a Time in Venice"},
    {id: 5, img:"http://www.impawards.com/2017/posters/med_scorched_earth.jpg", name: "Scorched Earth"},
    {id: 6, img:"http://www.impawards.com/2017/posters/med_underworld_blood_wars_ver9.jpg", name: "Underworld: Blood Wars"},
    {id: 7, img:"http://www.impawards.com/2017/posters/med_void.jpg", name: "The Void"},
    {id: 8, img:"http://www.impawards.com/2017/posters/med_war_for_the_planet_of_the_apes.jpg", name: "War for the Planet of the Apes"},
]


ReactDOM.render(
    <Ratings list={movieposters} />,
    document.getElementById('app')
);

Answer 1

你必须像在MoviePoster那样做。将道具传递给Votes，如此

<Votes votes={this.state.votes} />

然后在你的Votes函数中使用这个道具

function Votes(props) {
    return (
        <h2>Votes: {props.votes}</h2>
    );
}

Answer 2

将投票作为道具传递到您的投票组件 <Votes votes={this.state.votes} />

然后使用道具而不是状态

访问投票

function Votes(props) {
    return (
        <h2>Votes: {props.votes}</h2>
    );
}

Answer 3

您正在尝试访问Votes功能组件中的Ratings组件的状态。相反，你应该做的是将相关状态作为道具传递给投票组件：

<Votes count={this.state.votes} />

然后，在投票功能中：

function Votes(props) {
    return (<h2>Votes: {props.count}</h2>);
}

另外，这也是使用destructuring提高可读性的绝佳机会：

function Votes({ count }) {
    return (<h2>Votes: {count}</h2>);
}

在嵌套组件中重用访问状态

3 个答案: