Question

所以我想做的是通过数组forEach（）进行过滤，并为每个会话检查dayOfWeek的启用时间（星期一，星期二，...）。如果是某天，它将乘以会话的价格和持续时间，以得出该天的收入，并将其添加到“ 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

forEach不返回任何内容（返回值为undefined），您需要将值存储在变量中并在函数末尾返回。

    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 {sundayIncome ,mondayIncome,tuesdayIncome,wednesdayIncome,thursdayIncome,fridayIncome,saturdayIncome}
}

Answer 2

您应该返回值，并使用reduce代替forEach。

它看起来像：

...
return sessionList.reduce(
  (income, session) => {
    income[session.dayOfWeek] += (session.price * session.duration);
    return income;
  },
  { Monday: 0, Thueday: 0, Wednesday: 0, Thursday: 0, Friday:0, Saturday: 0, Sunday: 0 }
);
...

cf reduce了解详情

关于在何处创建此信息（是否使用状态），这是一个更具体系结构性的问题，具体取决于您打算在何处以及如何使用此信息。

Answer 3

我不确定您的数据结构如何，但希望以下内容将提供有关如何执行此操作的想法。我还在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

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

尝试创建函数时出现“未定义”

3 个答案: