javascript - 获取 "undefined"试图创建一个函数

Question

所以我想做的是通过使用 forEach() 的数组进行过滤，并为每个 session 检查它所在的星期几(星期一、星期二...)。如果是某一天，它会将价格和 session 持续时间乘以得出当天的收入，并将其添加到“mondayIncome”、“tuesdayIncome”……等等。我想稍后使用此信息来创建图表。当我使用 console.log() 函数时，它返回 undefined，这是为什么？另外，如果我有状态，这个过程会更容易吗？

我还有其他文件，例如 AddSession.js 和 Chart.js，但我决定在图表所在的仪表板中创建该函数，这样可以吗？

这是我的代码:

import React, { Component } from 'react'
import Income from './Income'
import Chart from './Chart'
import {connect} from 'react-redux'


class Dashboard extends Component {

  dayOfWeek = () => {
    const {sessionList} = this.props;
    let sundayIncome = 0;
    let mondayIncome = 0;
    let tuesdayIncome = 0;
    let wednesdayIncome = 0;
    let thursdayIncome = 0;
    let fridayIncome = 0;
    let saturdayIncome = 0;

    sessionList.forEach(session => {
        if (session.dayOfWeek === 'Sunday') {
            sundayIncome += (session.price * session.duration) 
            return sundayIncome
        }
        else if (session.dayOfWeek === 'Monday') {
            mondayIncome += (session.price * session.duration) 
            return mondayIncome
        }
        else if (session.dayOfWeek === 'Tuesday') {
            tuesdayIncome += (session.price * session.duration) 
            return tuesdayIncome
        }
        else if (session.dayOfWeek === 'Wednesday') {
            wednesdayIncome += (session.price * session.duration) 
            return wednesdayIncome
        }
        else if (session.dayOfWeek === 'Thursday') {
            thursdayIncome += (session.price * session.duration) 
            return thursdayIncome
        }
        else if (session.dayOfWeek === 'Friday') {
            fridayIncome += (session.price * session.duration) 
            return fridayIncome
        }
        else {
            saturdayIncome += (session.price * session.duration) 
            return saturdayIncome
        }
    })
}
  render() {
    console.log(this.dayOfWeek())
    return (
      <div className="container mt-5">

        <Chart/>
        <Income/>
        <hr/>

      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
      sessionList : state.sessions.sessionList
  }
}

export default connect(mapStateToProps)(Dashboard)

Answer 1

我不确定您的数据结构如何，但希望下面的内容可以让您了解如何执行此操作。我还在 codeSandBox 中为您模拟了这个函数，这样您就可以看到它显示了正确的数据。我没有对数字进行四舍五入(您可以按照自己喜欢的方式设置格式)。

codeSandBox 的链接在这里:https://codesandbox.io/s/8xon4yxo58

class Dashboard extends Component {
  dayOfWeek = () => {
    const { sessionList } = this.props;

    let sundayIncome = 0;
    let mondayIncome = 0;
    let tuesdayIncome = 0;
    let wednesdayIncome = 0;
    let thursdayIncome = 0;
    let fridayIncome = 0;
    let saturdayIncome = 0;

    sessionList.forEach(session => {
      if (session.dayOfWeek === "Sunday") {
        sundayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Monday") {
        mondayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Tuesday") {
        tuesdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Wednesday") {
        wednesdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Thursday") {
        thursdayIncome += session.price * session.duration;
      } else if (session.dayOfWeek === "Friday") {
        fridayIncome += session.price * session.duration;
      } else {
        saturdayIncome += session.price * session.duration;
      }
    });

    return [
      mondayIncome,
      tuesdayIncome,
      wednesdayIncome,
      thursdayIncome,
      fridayIncome,
      saturdayIncome,
      sundayIncome
    ];
  };

  render() {
    const sessionData = this.dayOfWeek();

    return (
      <div className="container mt-5">
        <p>
          {`Monday: ${sessionData[0]}`} <br />
          {`Tuesday: ${sessionData[1]}`} <br />
          {`Wednesday: ${sessionData[2]}`} <br />
          {`Thursday: ${sessionData[3]}`} <br />
          {`Friday: ${sessionData[4]}`} <br />
          {`Saturday: ${sessionData[5]}`} <br />
          {`Sunday: ${sessionData[6]}`} <br />
        </p>
      </div>
    );
  }
}

const sessionList = [
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 40
  },
  {
    dayOfWeek: "Tuesday",
    price: 4.99,
    duration: 2
  },
  {
    dayOfWeek: "Friday",
    price: 4.99,
    duration: 1
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 6
  },
  {
    dayOfWeek: "Monday",
    price: 4.99,
    duration: 7
  },
  {
    dayOfWeek: "Wednesday",
    price: 4.99,
    duration: 40
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 3
  },
  {
    dayOfWeek: "Sunday",
    price: 4.99,
    duration: 9
  },
  {
    dayOfWeek: "Thursday",
    price: 4.99,
    duration: 12
  }
];

上面产生了这个输出

Monday: 34.93 
Tuesday: 9.98 
Wednesday: 199.60000000000002 
Thursday: 59.88 
Friday: 4.99 
Saturday: 0 
Sunday: 289.42

希望我已经正确理解了您的问题并且以上内容对您有所帮助。