在ReactJS中向列表添加项目

Question

我希望在按钮点击时向我的列表中添加 多个 项目。我的列表看起来像这样：

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"
            }
    ]
};

需要有一个表单，其中包含以下input元素： 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"
}

- Anish Arya

---

这个回答解决了你的问题吗？在Reactjs中无法将项目添加到列表中 - wavecommander

myArray: [...prevState.myArray, ...arrayOfNewItems] - Gabriele Petrioli

Answer 1

以下是翻译的结果：

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

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;

- Khabir

---

谢谢，那个方法可行。但是我在这一行代码中收到了一个警告：this.state.movie.MovieID = lastMovie.MovieID + 1; 警告：不要直接改变状态，请使用setState()。我该怎么解决？ - Anish Arya

嗨@AnishArya，我修改了那行代码并在此处更新。请检查一下。它不会显示警告。 - Khabir

Answer 2

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

展开语法参考

以上代码允许将两个数组合并为一个。

等同于：

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

连接语法的参考

- Joelgullander