Отображение объектов в массиве в таблицу в React

Question

Не могли бы вы помочь мне передать объекты в массиве состояний в таблицу, используя метод 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

Попробуйте со следующими изменениями.

Требуется изменение при перемещении объектов в состояние массива

Чтобы подтолкнуть объекты или значения или числа в реакцию, вы должны сделать что-то вроде ниже. Рекомендуемый подход для передачи значений в массив в 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 вам не нужно выставлять счет [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>
    )
});

Answer 2

Одна возможная проблема, которую я вижу, это неправильная установка состояния в 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);

};

Состояние компонента является неизменным, и если вы попытаетесь изменить значения в состоянии, это произойдет, но реакция не будет уважать это. Узнайте больше об этих основах на главном веб-сайте реакции.

Спасибо