反应出错：第 25 行：'totalIncome' 未定义 no-undef

Posted 2023-02-23

【中文标题】反应出错：第 25 行：\'totalIncome\' 未定义 no-undef

【英文标题】：getting error in react: Line 25: 'totalIncome' is not defined no-undef反应出错：第 25 行：'totalIncome' 未定义 no-undef

【发布时间】：2019-07-29 21:42:24

【问题描述】：

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(); 时我可以看到它们出现了

此计算的总体目的是获取添加的新课程并在现有客户列表中运行它，并将课程的时间或持续时间与客户列出的价格相乘，这样我就可以获得收入。然后我想将个人收入添加到总收入中并显示出来。

我得到一个未定义的错误，或者如果我移动东西我得到一个“需要返回值”错误。我是新手，所以我很困惑。任何帮助将不胜感激，谢谢！如果您需要更多我的组件，请告诉我。

【问题讨论】：

将你的计算（）移动到componentDidMount（），请参阅反应生命周期方法。（reactjs.org/docs/react-component.html#componentdidmount）你要做的是1.从app.js获取道具2.执行计算（CdM（） ) 3. 基于计算的渲染错误是：你已经返回 this.setState(xyz)。但该方法不返回任何内容。

我不明白你想用“this.props.clients.filter”做什么，也许你应该使用reduce来只返回一个值。无论如何，我认为您在计算器上的 setState 中的“totalIncome”没有定义。

@EdisonJunior 我的思考过程是筛选每节课，每节课都会筛选现有客户列表，直到找到与相同名称匹配的客户。在那里我会做数学计算，然后将答案发回并将其添加到 totalIncome。

【参考方案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;

【讨论】：

哦，天哪，这行得通，非常感谢！我已经被困了两天了。