在ReactJS中将项目添加到列表中

单击按钮时，我想在我的

列表中添加
多个
项目。
我的列表如下所示：

constructor() {
  super();
    this.state = {
        movieData: 
        [
            {
                "MovieID": 1,
                "MovieName": "Iron Man",
                "LeadActor": "Robert Downey Jr.",
                "LeadActress": "Gwyneth Paltrow",
                "YearOfRelease": 2008,
                "Language": "English"
            },
            {
                "MovieID": 2,
                "MovieName": "Iron Man 2",
                "LeadActor": "Robert Downey Jr.",
                "LeadActress": "Gwyneth Paltrow",
                "YearOfRelease": 2010,
                "Language": "English"
            },
            {
                "MovieID": 3,
                "MovieName": "Thor",
                "LeadActor": "Chris Hemsworth",
                "LeadActress": "Natalie Portman",
                "YearOfRelease": 2011,
                "Language": "English"
            }
    ]
};

应该有一个带有
输入
元素的表单，该元素接受值：
id
，
电影名称
，
主角
，
主角
，
发行年份
，
语言

现在，我找到了将项添加到数组的解决方案，如下所示：

this.setState(prevState => ({
    myArray: [...prevState.myArray, 1]
}));

但是，即使使用这种方法，我也只能在单击按钮时添加单个项目

如何将多个项目以这种格式添加到列表中：

{
       "MovieID": some value,
       "MovieName": "some value",
       "LeadActor": "some value",
       "LeadActress": "some value",
       "YearOfRelease": some value,
       "Language": "some value"
}


上面的代码允许您将两个数组连接成一个数组

等于：

setNewState = movies => {
    this.setState({
        // Concats the two arrays into one
        myArray: this.state.myArray.concat(movies)
    })
}

以下是完整的示例。在这里，我将movie对象设置为构造函数中处于状态的数组movieData。在每个输入字段中，我在onChange事件中绑定handleChange，并从输入元素获取输入，以设置状态可用的movie对象。然后在提交表单之后，我将movie对象推送到movieData数组中。最后，我使用了MUIDatatable来传递电影数据，以显示所有电影。希望对你有帮助

import React, {useState, useEffect, Component} from 'react';
import MUIDataTable from "mui-datatables";

class MultiItems extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            movieData: [
                {
                    "MovieID": 1,
                    "MovieName": "Iron Man",
                    "LeadActor": "Robert Downey Jr.",
                    "LeadActress": "Gwyneth Paltrow",
                    "YearOfRelease": 2008,
                    "Language": "English"
                }
            ],
            movie: {}
        }
    }

    columns = ["MovieID", "MovieName", "LeadActor", "LeadActress", "YearOfRelease", "Language"];
    options = {
        filterType: "dropdown",
        responsive: "scroll"
    };

    handleChange = e => {
        this.name = e.target.name;
        this.value = e.target.value;
        this.setState(prevState => {
            return {
                movie: {
                    ...prevState.movie,
                    [this.name]: this.value
                }
            }
        });
    };

    handleSubmit = e => {
        e.preventDefault();

        let lastMovie = this.state.movieData[this.state.movieData.length -1];

        this.setState(prevState => {
            const movieData = prevState.movieData.concat({...prevState.movie, MovieID: lastMovie.MovieID + 1});
            return {
                movieData,
                movie: {},
            };
        });
    };

    render() {
        return (
            <div className='container'>
                <div className='row'>
                    <div className='col-4'>
                        <form onSubmit={this.handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="MovieName">Movie Name</label>
                                <input type="text" name='MovieName' value={this.state.movie.MovieName}
                                       onChange={this.handleChange}
                                       className="form-control" id="MovieName"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actor</label>
                                <input type="text" name='LeadActor' value={this.state.movie.LeadActor}
                                       onChange={this.handleChange} className="form-control" id="LeadActor"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actress</label>
                                <input type="text" name='LeadActress' value={this.state.movie.LeadActress}
                                       onChange={this.handleChange} className="form-control" id="LeadActress"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Year Of Release</label>
                                <input type="text" name='YearOfRelease' value={this.state.movie.YearOfRelease}
                                       onChange={this.handleChange} className="form-control" id="YearOfRelease"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Language</label>
                                <input type="text" name='Language' value={this.state.movie.Language}
                                       onChange={this.handleChange} className="form-control" id="Language"/>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                        <MUIDataTable
                            title={"Movies"}
                            data={this.state.movieData}
                            columns={this.columns}
                            options={this.options}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default MultiItems;

import React，{useState，useffect，Component}来自'React'；
从“mui数据表”导入MUIDataTable；
类MultiItems扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
此.state={
电影资料：[
{
“电影ID”：1，
“电影名字”：“钢铁侠”，
“主角”：“小罗伯特·唐尼”，
“女主角”：“格温妮丝·帕特罗”，
“租赁年”：2008年，
“语言”：“英语”
}
],
电影：{}
}
}
列=[“电影ID”、“电影名称”、“男主角”、“女主角”、“租赁年”、“语言”]；
选项={
filterType:“下拉列表”，
响应：“滚动”
};
handleChange=e=>{
this.name=e.target.name；
this.value=e.target.value；
this.setState（prevState=>{
返回{
电影：{
…国家电影，
[this.name]：this.value
}
}
});
};
handleSubmit=e=>{
e、 预防默认值（）；
让lastmoine=this.state.movieData[this.state.movieData.length-1]；
this.setState（prevState=>{
const movieData=prevState.movieData.concat（{…prevState.movie，MovieID:lastmoine.MovieID+1}）；
返回{
电影资料，
电影：{}，
};
});
};
render（）{
返回(
电影名称
主角
女主角
释放年份
语言
提交
);
}
}
导出默认多项目；
这是否回答了您的问题<代码>myArray:[…prevState.myArray，…arrayOfNewItems]
谢谢，这很有效。但是我得到了一个警告：
this.state.movie.MovieID=lastmoine.MovieID+1警告：
不要直接改变状态。使用setState（）
我如何解决这个问题？嗨@AnishArya我已经修改了行代码并在这里更新了。请检查一下。它不会显示该警告。
import React, {useState, useEffect, Component} from 'react';
import MUIDataTable from "mui-datatables";

class MultiItems extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            movieData: [
                {
                    "MovieID": 1,
                    "MovieName": "Iron Man",
                    "LeadActor": "Robert Downey Jr.",
                    "LeadActress": "Gwyneth Paltrow",
                    "YearOfRelease": 2008,
                    "Language": "English"
                }
            ],
            movie: {}
        }
    }

    columns = ["MovieID", "MovieName", "LeadActor", "LeadActress", "YearOfRelease", "Language"];
    options = {
        filterType: "dropdown",
        responsive: "scroll"
    };

    handleChange = e => {
        this.name = e.target.name;
        this.value = e.target.value;
        this.setState(prevState => {
            return {
                movie: {
                    ...prevState.movie,
                    [this.name]: this.value
                }
            }
        });
    };

    handleSubmit = e => {
        e.preventDefault();

        let lastMovie = this.state.movieData[this.state.movieData.length -1];

        this.setState(prevState => {
            const movieData = prevState.movieData.concat({...prevState.movie, MovieID: lastMovie.MovieID + 1});
            return {
                movieData,
                movie: {},
            };
        });
    };

    render() {
        return (
            <div className='container'>
                <div className='row'>
                    <div className='col-4'>
                        <form onSubmit={this.handleSubmit}>
                            <div className="form-group">
                                <label htmlFor="MovieName">Movie Name</label>
                                <input type="text" name='MovieName' value={this.state.movie.MovieName}
                                       onChange={this.handleChange}
                                       className="form-control" id="MovieName"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actor</label>
                                <input type="text" name='LeadActor' value={this.state.movie.LeadActor}
                                       onChange={this.handleChange} className="form-control" id="LeadActor"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Lead Actress</label>
                                <input type="text" name='LeadActress' value={this.state.movie.LeadActress}
                                       onChange={this.handleChange} className="form-control" id="LeadActress"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Year Of Release</label>
                                <input type="text" name='YearOfRelease' value={this.state.movie.YearOfRelease}
                                       onChange={this.handleChange} className="form-control" id="YearOfRelease"/>
                            </div>
                            <div className="form-group">
                                <label htmlFor="LeadActor">Language</label>
                                <input type="text" name='Language' value={this.state.movie.Language}
                                       onChange={this.handleChange} className="form-control" id="Language"/>
                            </div>
                            <button type="submit" className="btn btn-primary">Submit</button>
                        </form>
                        <MUIDataTable
                            title={"Movies"}
                            data={this.state.movieData}
                            columns={this.columns}
                            options={this.options}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default MultiItems;