如何在React中对对象数组进行有条件的reduce调用？

Question

这是在React Redux reducer文件中定义的数字数组：

const initialState = {
    numbers: [
        { name: 'max', num: 3, inCart: false },
        { name: 'jack', num: 2, inCart: true },
        { name: 'jack', num: 2, inCart: true }
    ]
};

在组件中，仅当inCart === true时，我想对数字数组中所有对象中的所有数字值求和。

这就是我的做法：

useEffect(() => {
    const total = props.numbers.reduce((prev, current) => {
        if (current.inCart) return prev + current.num;
    }, 0);
    console.log(total);
}, []);

这是我得到的控制台日志：

NaN

所以它不起作用，我在做什么错？

Answer 1

有帮助吗？

const total = props.numbers.reduce((prev, current) => {
    return (current.inCart) ? prev + current.num : prev;
}, 0);

Answer 2

您需要在prev方法内部最后返回更新的reduce()，例如：

const total = props.numbers.reduce((prev, current) => {
  if (current.inCart) prev += current.num;
  return prev;
}, 0);

const numbers = [
    { name: 'max', num: 3, inCart: false },
    { name: 'jack', num: 2, inCart: true },
    { name: 'jack', num: 2, inCart: true }
]

const total = numbers.reduce((prev, current) => {
  if (current.inCart) prev += current.num;
  return prev;
}, 0);

console.log(total);

Answer 3

current.inCart为false时，您忘记了返回上一页。

const total = props.numbers.reduce((prev, current) => {
            if (current.inCart) return prev + current.num;
            return prev;  
        }, 0);

应该是这样。

Answer 4

减少另一个答案或过滤并减少

const props = {
numbers: [
        { name: 'max', num: 3, inCart: false },
        { name: 'jack', num: 2, inCart: true },
        { name: 'jack', num: 2, inCart: true }
    ]
}
console.log(
  props.numbers
    .filter(item => item.inCart)
    .reduce((prev, current) => prev + current.num, 0)
)