ReactJS在表中添加新行

如何解决ReactJS在表中添加新行

我动态创建表： 在组件表中，我在json中设置了表的默认值：

constructor(props) {
    super(props);
    this.state = {
        data: [
            {'Date': '','Operation': '','Amount': '','Item_of_expenditure': '','Balance': ''}
        ]
    };
}

然后用它来渲染表格：

   render() {
    return (
        <div className={styles}>
            <table>
                <thead>
                <tr>{this.getHeader()}</tr>
                </thead>
                <tbody>
                {this.getRowsData()}
                </tbody>
                <button onClick={this.addRow}>
                    Add new row
                </button>
            </table>
        </div>
    );
}

这是一种方法实现：

getKeys = function () {
    return Object.keys(this.state.data[0]);
};

getHeader = function () {
    var keys = this.getKeys();
    return keys.map((key,index) => {
        return <th key={key}>{key.toLowerCase()}</th>
    })
};

getRowsData = function () {
    var items = this.state.data;
    var keys = this.getKeys();
    return items.map((row,index) => {
        return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
    })
};

现在我尝试使用此方法添加新行：

 addRow = function () {
    let newRows = this.state.data.push({'Date': '','Balance': ''});
    this.setState({data: newRows});
};

但是当我尝试它时，出现以下错误：TypeError：无法将未定义或null转换为对象 在

    return Object.keys(this.state.data[0]);

确实，在将新对象推入“数据”后，我发现“数据”不包含任何元素。尽管在此之前它包含1个元素：{'Date'：''，'Operation'：''，'Amount'：''，'Item_of_expenditure'：''，'Balance'：''}

解决方法

这是您的函数中的错误。推入将返回推入数组的值，

addRow = () => {
    let existingRows = this.state.data;
    existingRows.push({'Date': '','Operation': '','Amount': '','Item_of_expenditure': '','Balance': ''});
    this.setState({ data: existingRows });
};

如果您希望对addRow使用箭头功能，则不需要以下内容！或者，如果您想使用常规功能，则必须如下更改onClick按钮，

addRow = function () {
     let existingRows = this.state.data;
     existingRows.push({ 'Date': '','Balance': '' });
     this.setState({ data: existingRows });
};

<button onClick={() => this.addRow()}>
    Add new row
</button>

,

<template> <v-dialog v-model="dialog" width="600"> <template v-slot:activator="{ on }"> <v-btn v-on="on"> <v-icon left>mdi-pencil</v-icon> </v-btn> </template> <v-card> <v-card color="primary" dark flat> <v-card-title>Change Meal</v-card-title> <v-spacer></v-spacer> </v-card> <v-card-text> <v-container> <v-row> <v-col cols="12"> <v-text-field label="Date*" v-model="meal.date" required></v-text-field> </v-col> <v-col cols="12"> <v-text-field label="Time*" v-model="meal.time" required></v-text-field> </v-col> <v-col cols="12"> <v-text-field label="Text*" v-model="meal.text" required></v-text-field> </v-col> <v-col cols="12"> <v-text-field label="Calorie*" v-model="meal.calorie" required></v-text-field> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-tooltip left> <ApproveDialog /> </v-tooltip> <v-btn color="primary" text @click="dialog = false">Close</v-btn> </v-card-actions> </v-card> </v-dialog> </template> <script> export default { data() { return { } },props: [ 'meal',],methods: { async updateMeal() { await this.$store.dispatch('updateMeal',this.meal._id); } } } </script> 的值将是newRows，您将其设置为状态，而不是一个数组。

所以您可以做的是：-

{'Date': '','Balance': ''}