React useReducer未显示数组中的值。减少

Question

我使用useReducer保存一些状态，如下面的代码所示，但它没有从array 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变量中
• 当批次条目发生更改时，我使用useEffect由雇主触发DispatchEntries
• 这会导致减速器运行

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

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

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

Answer 1

问题在于减速器本身。因为我在分配数组键，所以它没有显示数组。相反，我把它变成了一个对象

js lang-js prettyprint-override"> 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, {});
    },
    {}
  );