ReactJS：需要调试帮助吗

我有一组数据：

+----+---------+--------+---------------------+
| id | goal_id | saved  | date                |
+----+---------+--------+---------------------+
|  1 |       1 |  50.00 | 2020-12-24 02:35:04 |
|  2 |       2 | 100.00 | 2020-12-24 02:35:04 |
|  3 |       3 | 500.00 | 2020-12-24 02:35:04 |
|  4 |       3 |  10.00 | 2020-12-24 02:35:04 |
|  5 |       3 |  50.00 | 2020-12-24 02:35:04 |
|  6 |       3 | 300.00 | 2020-12-24 02:35:04 |
+----+---------+--------+---------------------+

属于另一个数据集的：

+----+--------+------------+
| id | myGoal | goal       |
+----+--------+------------+
|  1 | House  | 1000000.00 |
|  2 | Car    |   21000.00 |
|  3 | School |   13000.00 |
+----+--------+------------+

我已将其映射到前端：

        {saveData &&
      saveData.map((saveItem) => {
        return (
          <div className="card">
            <ul className="card__list" key={saveItem.id}>
              <SaveCard key={saveItem.id} saveItem={saveItem} />
            </ul>
          </div>
        );
      })}

我的输出如下所示：

{1: Array(1)} 1: [50]
{2: Array(1)} 2: [100]
{3: Array(1)} 3: [500]
{3: Array(1)} 3: [10]
{3: Array(1)} 3: [50]
{3: Array(1)} 3: [300]

相反，我想要：

{1: [50]}
{2: [100]} 
{3:[500, 10, 50, 300]} 

---

我的问题是，我哪里出错了？

请参考此代码段：了解您的预期输出

const saveItem=[
{
目标：1，
保存：1
},
{
目标：1，
已保存：2
},
{
目标:2,，
已保存：3
},
{
目标：3，
已保存：4
},
{
目标：3，
保存：1
}
];
const[goalRemainder，setGoalRemainder]=useState（saveItem）；//这里没有数组括号
const savedAmount={}；
const saveID=goalRemainder.reduce（（savedAmount，{goal_id，saved}）=>{
（savedAmount[goal_id]=savedAmount[goal_id]| |[]）。推送（保存）；
返回savedAmount；
}, {});
console.log（saveID）

@PrinceJelly您好，我建议在组件外部使用util方法进行分组，对于组件，我们可以根据渲染需要保持状态简单。嗯，谢谢您的回复！你认为我应该把它提高一个层次吗？我目前正在映射后的最低级别使用该函数。它似乎不喜欢没有数组的useState（[saveItem]）。我得到一个错误：TypeError:goalRemainder.reduce不是一个函数。@原则上一个技巧是使用

console.log

打印

goalRemainder

以查看数据类型

reduce

仅适用于数组，在您的情况下，

goalRemainder

应该是数组，否则会出现一些逻辑错误

{1: [50]}
{2: [100]} 
{3:[500, 10, 50, 300]}