Question

能否请您使用react中的map方法将状态数组中的对象传递给表？我可以将对象推入发票数组，但不能映射到表中。请建议是否可以使用其他任何方法。

在重复上述内容时，请忽略以下评论。

能否请您使用react中的map方法将状态数组中的对象传递给表？我可以将对象推入发票数组，但不能映射到表中。请建议是否可以使用其他任何方法。

import React, { Component } from 'react';

class Form extends Component {
constructor(props) {
    super(props);
    this.state = {
        company: "",
        address: "",
        zip: "",
        date: "",
        description: "",
        unit: "",
        quantity: "",
        invoices: []
    };
}

handleChange = (e) => {
    e.preventDefault();
    this.setState({ [e.target.name]: e.target.value })
};

handleSubmit = (e) => {
    e.preventDefault();
    this.state.invoices.push({
        description: this.state.description,
        unit: this.state.unit,
        quantity: this.state.quantity
    });
    //console.log(this.state.invoices[].description);

};

render() {
    const hrStyle = {
        border: '5px solid rgb(23, 162, 184)'
    };

    const list = this.state.invoices.map((invoice, index) => {
        return (
            <tr key={index}>
                <td>{invoice[index].description}</td>
                <td>{invoice[index].unit}</td>
                <td>{invoice[index].quantity}</td>
                <td>{invoice[index].unit * invoice[index].quantity}</td>
            </tr>
        )
    });

    return (
        <React.Fragment>
            <div className='col-12 col-lg-6'>
                <div className="jumbotron">
                    <form>
                        <label><h4>Billed To: </h4></label><br />
                        <div className="form-group">
                            <label>Company Name</label>
                            <input onChange={this.handleChange} className="form-control" type="text" name="company" />
                        </div>
                        <div className="form-group">
                            <label>Address</label>
                            <input className="form-control" type="text" onChange={this.handleChange} name="address" />
                            <label>Zip Code</label>
                            <input className="form-control" type="number" onChange={this.handleChange} name="zip" /></div>
                        <div className="form-group">
                            <label>Date</label>
                            <input className="form-control" type="date" onChange={this.handleChange} name="date" />
                        </div>
                    </form>
                    <form onSubmit={this.handleSubmit}>
                        <label><h4>Invoice: </h4></label><br />
                        <div className="form-group">
                            <label>Description</label>
                            <input className="form-control" type="text" onChange={this.handleChange} name="description" />
                        </div>
                        <div className="form-group">
                            <label>Unit Price</label>
                            <input className="form-control" type="number" onChange={this.handleChange} name="unit" />
                            <label>Quantity</label>
                            <input className="form-control" type="number" onChange={this.handleChange} name="quantity" />
                        </div>
                        <button className="btn btn-primary btn-sm">Add Invoices</button>

                    </form>
                </div>
            </div>
            <div className="col-12 col-lg-6">
                <div className="container-fluid bg-info text-white">
                    <div className="row">
                        <div className="col text-left">
                            <p>Your Company Name</p>
                            <h2>Invoice</h2>
                        </div>
                        <div className="col text-right">
                            <p>22 Yusen St</p><br />
                            <p>Auburn</p><br />
                            <p>NSW</p>
                        </div>
                    </div>
                </div>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-4">
                            <p>{this.state.company}</p>
                            <p>{this.state.address}</p>
                            <p>{this.state.Zip}</p>
                        </div>
                        <div className="col-4">
                            <div>
                                <h5>Invoive number</h5>
                                <p>{Math.floor((Math.random() * 100) + 1)}</p>
                            </div>
                            <div>
                                <h5>Date</h5>
                                <p>{this.state.date}</p>
                            </div>
                        </div>
                        <div className="col-4">
                            <div>
                                <h5>Invoice Totals</h5>
                                <p>$2587.35</p>
                            </div>
                        </div>
                    </div>
                </div>
                <hr style={hrStyle} />
                <div className="Invoices">
                    <table className="table">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Unit Price</th>
                                <th>Quantity</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {list}
                        </tbody>
                    </table>
                </div>
            </div>
        </React.Fragment>

    );
}
}

export default Form;

Answer 1

我看到的一个可能的问题是在handleSubmit中没有正确设置状态。您应该执行以下操作：

handleSubmit = (e) => {
    e.preventDefault();
    const copyStateInvoices = [...this.state.invoices]
    copyStateInvoices.push({
        description: this.state.description,
        unit: this.state.unit,
        quantity: this.state.quantity
    })
    this.setState({
      invoices: copyStateInvoices,
    })
    //console.log(this.state.invoices[].description);

};

组件的状态是不可变的，如果您尝试更改状态下的值，它将发生但反应不会尊重。在react主网站上了解有关这些基础知识的更多信息。

谢谢

Answer 2

尝试以下更改。

将对象推到数组状态时需要改变

要在反应中推送对象，值或数字，您应该执行以下操作。在React中将值推入数组的推荐方法是使用prevState

   handleSubmit = (e) => {
       e.preventDefault();
       this.setState(prevState => ({
          invoices: [...prevState.invoices, {
          description: this.state.description,
          unit: this.state.unit,
          quantity: this.state.quantity
       }]
  }));
   };

在.map中，您不需要执行invoice [index]即可获取值，因为您正在对数组进行.map，因此它为您提供了循环中的每个对象，因此您可以直接访问invoice.unit和invoice [index] .unit是不需要的，并且在循环中不正确

   const list = this.state.invoices.map((invoice, index) => {
    return (
        <tr key={index}>
            <td>{invoice.description}</td>
            <td>{invoice.unit}</td>
            <td>{invoice.quantity}</td>
            <td>{invoice.unit * invoice.quantity}</td>
        </tr>
    )
});

将数组中的对象映射到React中的表

2 个答案: