При попытке посчитать общую сумму зп пишет ошибку TypeError: Cannot read property 'items' of undefined?

100
13 января 2021, 07:20

Помогите я новичок в React. Задача: дан массив с работниками. У каждого работника есть имя, фамилия, количество отработанных дней и зарплатная ставка за день. Выведите этих работников на экран в виде таблицы. Сделайте так, чтобы в последней колонке автоматически рассчитывалась зарплата работника (количество отработанных дней умножить на ставку). Сделайте так, чтобы количество дней и ставка выводились в виде инпутов. Если поредактировать эти инпуты - зарплата также должна поменяться. Под таблицей также выведите суммарную зарплату всех работников. Зарплата автоматически высчитывается, а общую сумму зарплаты не получается посчитать. Для этого надо уведомлять компонент ItemList об изменении полей в Item. Для этого я сделала привязку через props, но вызывается ошибка TypeError: Cannot read property 'items' of undefined

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import update from 'immutability-helper';
class Item extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        index: this.props.index , name: this.props.name,   surname: this.props.surname,
        numberOfWorkingDays: this.props.numberOfWorkingDays,  dailySalary: this.props.dailySalary
    };
    this.handleChangeNumWrk = this.handleChangeNumWrk.bind(this);
    this.handleChangeDs = this.handleChangeDs.bind(this);
}
handleChangeNumWrk(e) {
    this.props.onHdWk(e.target.value, this.state.index);
}
handleChangeDs(e) {
    this.props.onHdDs(e.target.value, this.state.index);
}
render() {
    let nmb = this.props.numberOfWorkingDays;
    let ds = this.props.dailySalary;
    return <tr>
        <td>{this.state.index}</td>
        <td>{this.state.name}</td>
        <td>{this.state.surname}</td>
        <td><input type='text' name='nwd' value={nmb}
                   onChange={this.handleChangeNumWrk}/></td>
        <td><input type='text' name='ds' value={ds}
                   onChange={this.handleChangeDs}/></td>
        <td>{this.state.dailySalary*this.state.numberOfWorkingDays}</td>
    </tr>;
}

}

class ItemsList extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        items: [
            { id: 1, name: 'Ivan',   surname: 'Ivanov',   numberOfWorkingDays: 3,  dailySalary: 500},
            { id: 2, name: 'Petr',   surname: 'Petrov',   numberOfWorkingDays: 4,  dailySalary: 600},
            { id: 3, name: 'Vasiliy',surname: 'Vasilev',  numberOfWorkingDays: 5,  dailySalary: 700},
            { id: 4, name: 'Anna',   surname: 'Olegovna', numberOfWorkingDays: 6,  dailySalary: 800},
            { id: 5, name: 'Rita',   surname: 'Ivanova',  numberOfWorkingDays: 7,  dailySalary: 900},
            { id: 6, name: 'Yulia',  surname: 'Petrova',  numberOfWorkingDays: 8,  dailySalary: 1000},
            { id: 7, name: 'Albert', surname: 'Kozlov',   numberOfWorkingDays: 9,  dailySalary: 500},
            { id: 8, name: 'Zhanna', surname: 'Palmirova',numberOfWorkingDays: 10, dailySalary: 600},
            { id: 9, name: 'Ivan',   surname: 'Smirnov',  numberOfWorkingDays: 11, dailySalary: 700},
            { id: 10, name: 'Sergey', surname: 'Sidorov',  numberOfWorkingDays: 12, dailySalary: 800}
        ]
        ,
        commonSum:0
    };
    this.sums = this.sums.bind(this);
    this.updateItem = this.updateItem.bind(this);
}
sums(){
    let sum = 0;
    this.state.items.map((item, index) => {
        sum += item.numberOfWorkingDays*item.dailySalary;
    });
    return sum;
}
onChangeNmb(numb, index) {
    var listIt = this.state.items;
    listIt: update(listIt, {index: {numberOfWorkingDays: {$set: numb}}});
    this.setState({items: listIt});
}
onChangeDs(ds, index) {
    var listIt = this.state.items;
    listIt: update(this.state.items, {index: {dailySalary: {$set: ds}}});
    this.setState({items: listIt});
}
render() {
    var divStyle = {
        paddingLeft: '450px'
    };
    const list = this.state.items.map((item, index) => {
        return <Item key={item.id}
                     index={index+1} name={item.name} surname={item.surname}
                     numberOfWorkingDays={item.numberOfWorkingDays}
                     dailySalary = {item.dailySalary}
                     onHdWk = {this.onChangeNmb}
                     onHdDs = {this.onChangeDs}/>;
    });
    return <div>
        <div>{this.props.title}</div>
        <table>
            <tbody >
            <tr>
                <th>№</th>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>Кол-во отработанных дней</th>
                <th>Ставка за день</th>
                <th>Итого</th>
            </tr>
            {list === null?null:list}
            </tbody>
        </table>
        <div style={divStyle}>Общая сумма: {this.sums()}</div>
    </div>;
}

}

 ReactDOM.render(<ItemsList title="Отчет о заработной плате работников."></ItemsList>, document.getElementById('app'));
READ ALSO
Как можно не перперерендерить vue шаблон при открытии страницы?

Как можно не перперерендерить vue шаблон при открытии страницы?

Есть страница сайта сделанная на vueНо с vue страница рендерится на клиенте и изначально страница прходит пустой

133
Отсортировать по отдельному полю

Отсортировать по отдельному полю

У меня есть массив объектовlet arr = [], в нем находятся такие объекты:

90
Тройка вопросов по CSS [закрыт]

Тройка вопросов по CSS [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме

147
Как реализовать такое на bootstrap4?

Как реализовать такое на bootstrap4?

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

124