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

Question

您能帮我在反应中使用 map 方法将状态数组中的对象传递给表吗？ 我可以将对象推送到发票数组中，但无法映射到表格中。 请提出其他方法是否可行。

请忽略下面的 cmets，因为我将重复上面的上下文。

您能帮我在反应中使用 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 不会尊重这一点。在 react 主网站上阅读有关这些基础知识的更多信息。

谢谢

Answer 2

尝试以下更改。

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

要在 react 中推送对象、值或数字，您应该执行以下操作。在 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>
    )
});