ошибка в реакции: строка 25: «totalIncome» не определен no-undef

Question

import React, {Component} from 'react'

class CalculateIncome extends Component {
        state = {
            totalIncome:0
        }

        calculation = () => {
            this.props.lessons.filter(lesson => {
                this.props.clients.filter(client => {
                    if (client.name === lesson.name){
                        let income = client.price * lesson.time;
                        let totalIncome = this.state.totalIncome + income
                        return(
                            totalIncome
                        )
                    }
                    return (
                        this.setState({
                            totalIncome : totalIncome   //this is the error
                        })
                    )
                })      
                return (this.state.totalIncome)
            })
        }

        render() {
            console.log(this.props.lessons, this.props.clients) //this checks out!
            return ( this.props.lessons.length ? 
            (
                <div onLoad={this.calculation}>{this.state.totalIncome}</div>
            )  
                : 
            (<div className="text-center my-5">You are broke</div>) 
        )
    }
}

export default CalculateIncome

Реквизиты из App.js загружаются правильно, потому что я вижу, как они появляются, когда я выполняю console.log ();

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

Я либо получаю неопределенную ошибку, либо, если что-то переместить, я получаю ошибку "Нужно возвращаемое значение". Я новичок в реакции, поэтому я очень смущен. Любая помощь будет оценена, спасибо! Если вам нужно больше моих компонентов, пожалуйста, дайте мне знать.

Answer 1

Я не думаю, что вам вообще нужно использовать состояние для этого вычисления (если вы сделали это так, как пытаетесь, ваш компонент будет повторно отображаться при каждом совпадении урока клиента. Вот быстрый (не проверенный) как ты мог это сделать.

import React, { PureComponent } from 'react'

class CalculateIncome extends PureComponent {
        calculation = () => {
            const { lessons = [], clients = [] } = this.props;
            let totalIncome = 0;
            lessons.forEach(lesson => {
                clients.forEach(client => {
                    if (client.name === lesson.name) {
                        totalIncome += client.price * lesson.time;
                    }
                });
            });
            return totalIncome;
        }

        render() {
            const { lessons } = this.props;

            if (lessons.length) {
                const totalIncome = this.calculation();
                return <div>{totalIncome}</div>;
            }
            return <div className="text-center my-5">You are broke</div>;
        )
    }
}

export default CalculateIncome;