javascript - 反应useReducer没有显示来自array.reduce的值

Question

我正在使用 useReducer 来保存一些状态，如下面的代码所示，但它没有从数组 reducer 函数返回值。

  let [entriesByEmployer, dispatchEntriesByEmployer] = useReducer(
    (state, action) => {
      const reducer = (employerEntries, entry) => {
        console.log("adding to employerEntries");
        employerEntries[entry.employerId] = employerEntries[entry.employerId] || [];
        employerEntries[entry.employerId].push(entry);
        console.log(employerEntries);
        return employerEntries;
      };
      return batchEntries.reduce(reducer, []);
    },
    []
  );

过程：

• 当我单击屏幕上的按钮时，它会从数据库中获取信息
• 该信息存储在 batchEntries 变量中。
• 当 batchEntries 改变时，我使用 useEffect 来触发 dispatchEntriesByEmployer
• 这会导致减速器运行。

我知道内部 reduce 函数会运行，因为如果我将它包装在控制台日志中，它会将我期望的数据输出到控制台。

console.log(batchEntries.reduce(reducer, []));

但是，当我返回 reduce 函数的结果时，React DevTools 在我检查组件时显示“Reducer: Array (empty)”

标签： javascriptreactjsreact-hooks

Answer 1

问题出在减速器本身。因为我正在分配数组键，所以它没有显示数组。相反，我将其更改为一个对象

 let [entriesByEmployer, dispatchEntriesByEmployer] = useReducer(
    (state, action) => {
      const reducer = (employerEntries, entry) => {
        console.log("adding to employerEntries");
        employerEntries[entry.employerId] = employerEntries[entry.employerId] || [];
        employerEntries[entry.employerId].push(entry);
        console.log(employerEntries);
        return employerEntries;
      };
      return batchEntries.reduce(reducer, {});
    },
    {}
  );