Получение «неопределенного» при попытке создать функцию
Итак, что я хочу сделать, это отфильтровать массив с помощью forEach() и для каждого сеанса проверить день недели, в который он включен (понедельник, вторник,...). Если это определенный день, он будет умножать цену и продолжительность сеанса, чтобы получить доход за этот день и добавить его к «доходу за понедельник», «доходу за вторник» и т. д. Я хочу позже использовать эту информацию для создания диаграммы. Когда я использую функцию console.info(), она возвращает неопределенное значение, почему? Кроме того, был бы этот процесс проще, если бы у меня было состояние?
У меня есть другие файлы, такие как 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.info(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)
также наличие return в sessionList.forEach(session => { не имеет смысла, так как возвращаемое значение теряется
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
для каждого ничего не возвращает (возвращаемое значение равно 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}
}
Я не отрицал, но переменные уже определены вне forEach.
Я не голосую против, но вы отвечаете, что это не решение проблемы, так как он рассчитывает общий доход, а не доход в день.
@AZ_ да, но поскольку OP используется для каждого, вы не сможете знать, какой из них вернуть. так как forEach не возвращает значения
@ h1b9b да, это верный момент, изменил его, чтобы он возвращал все значения вместо одного
@CodeManiac Я согласен, что return просто не имеет никакого смысла внутри forEach, но проблема с кодом в том, что OP вообще ничего не возвращает.
@AZ_ forEach don't return anything ( it's return value is undefined ), you need to store value in variable and return at end of function думаю, это говорит о том же, приятель :)
@CodeManiac Я это понимаю, но где возвращается forEach? если бы это было похоже на вернуть sessionList.forEach (сеанс => {, то комментарий, что forEach ничего не возвращает, был бы причиной проблемы. но, как я уже сказал, OP не возвращает undefined, но он вообще ничего не возвращает.
@AZ_ если вы ничего не возвращаете из функции, она будет неявно возвращаться undefined, поэтому возврат undefined и ничего не возвращая - это одно и то же
Но зачем использовать forEach, если вы хотите вернуть результат, а не уменьшить?
@ h1b9b да, вы можете, и у вас есть много других способов сделать то же самое, OP выбрал поэтому объяснение, я просто изменил существующий код, чтобы показать его в качестве примера.
Вы должны вернуть значение и использовать 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 }
);
...
Подробности см. в уменьшать.
Что касается того, где это создать (использовать состояние или нет), это больше архитектурная проблема, которая зависит от того, где и как вы собираетесь использовать эту информацию.
В вашем коде есть некоторые проблемы, приятель, income[session.dayOfWeek] += (session.price * session.duration); приведет к NaN, поскольку у вас есть [] в качестве аккумулятора, вы не должны использовать массив, если хотите, чтобы индекс был чем-то другим, кроме числа, которое вы должны использовать Map или Object
Я не уверен, какова ваша структура данных, но, надеюсь, приведенное ниже даст представление о том, как это сделать. Я также смоделировал эту функцию в 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
Надеюсь, я правильно понял ваш вопрос, и вышеизложенное полезно.
Понятно! Спасибо :) Я не знал, что forEach не возвращает значение. Это очень помогло!
вы не возвращаете значение из функции
dayOfWeek