Reactjs 道具没有出现。如何改进我的代码？答案

【问题标题】：Reactjs props not showing up. How can I improve my code?Reactjs 道具没有出现。如何改进我的代码？
【发布时间】：2023-03-12 13:19:01
【问题描述】：

//初始状态和其他属性

    var ReviewControl = React.createClass({
        getInitialState: function() {
            return {
                name:'',
                feedback:'',
                movie:'',
                reviews:[] 
            };
        },
    onChangeName:function(el){
        this.setState({name:el.target.value})
    },

    onChangeFeedback:function(el) {
        this.setState({feedback:el.target.value})
    },

    onChangeMovie:function(el){
        this.setState({agent:el.target.value})
    },

    submitReview:function(el) {

//防止表单默认

        el.preventDefault();

//将数据存储到之前创建的reviews数组中

        this.state.reviews.push(
            {name:this.state.name, feedback:this.state.feedback, movie:this.state.movie});
        this.setState({name:'', feedback:''});
    },

    render: function() {
        var options = this.props.list.map(function(agent){

            return (<option key={agent.id} value={agent.agentName}>{agent.agentName}</option>);
        });

//rendering the form for feedback

        return (

            <div>

//创建表单

                <form onSubmit = {this.submitReview}>
                    <lable> Agent Name : </lable>
                    <input type="text" placeholder='Enter The Agent Name' value={this.state.name} onChange={this.onChangeName} />
                    <br/><br/>


                    <lable> Feedback : </lable>
                    <input type="text" placeholder='Enter Your Feedback' value={this.state.feedback} onChange={this.onChangeFeedback} />
                    <br/><br/>

                    <select onChange={this.onChangeMovie}>
                        {options}
                    </select>

                    <br/><br/>

                    <input type="submit" value="Submit"/>

                </form>

//收集评论

                <ReviewCollection reviews = {this.state.reviews} /> 

            </div>
            )
    }


});

// collecting all the reviews from the user and storing it

var ReviewCollection = React.createClass ({

    render:function () {

        var reviews = this.props.reviews.map(function(review) {
            return <Review key={review.id} movie = {review.movie} name = {review.name} feedback = {review.feedback} />
        });

        return (<div> {reviews} </div>)
    }

    });

//显示数组查看中存储的值

var Review = React.createClass({
        render:function(){
            return <div>

                <span> Agent Name </span>
                {this.props.name}
                <br/>

                <span> Movie Name </span>
                {this.props.movie}
                <br/>

                <span> Feedback </span>
                {this.props.feedback}
                <br/>
            </div>
        }

});

// 渲染表单

var finalReview = <ReviewControl list={agentList} />;
ReactDOM.render(finalReview, document.getElementById('myid'));

【问题讨论】：

标签： javascript jquery web reactjs

【解决方案1】：

您没有在submitReview 中设置新的审核状态。只是推入旧数组实际上并没有更新状态。您必须明确更新它。

this.state.reviews.push({
  name: this.state.name,
  feedback: this.state.feedback,
  movie: this.state.movie
});

this.setState({
  name: '',
  feedback: '',
  reviews: this.state.reviews
});

我注意到的另一件小事是您使用el 作为事件的参数。通常它只是e 或event。 el 通常是 element 的缩写，通常是 dom 节点。

【讨论】：