从产生函数返回数组值immer.js

问题描述

我正在使用immer.js在状态下对数组执行操作。

数组：basicRecipe和配方BasicRecipe。

我正在生产函数中修改draft.basicRecipe。我的目标是返回更新的“ draft.basicRecipe”值，并将其存储在temparray1中。

    let temparray1 = produce(state,draft => {
      
      draft.basicRecipe = draft.basicRecipe.map(item => {
        let element = draft.recipeBasicRecipes.find(e => e._id === item._id);
        console.log(element);
        if (element) {
          item.details = item.details.map(e => {
            let detail = element.details.find(d => d._id === e._id);
            if (detail) {
              e.rate = detail.rate;
            }
            return e;
          });
        }
        return item;
      });
      return draft.basicRecipe;
    });

    console.log(temparray1);

当我返回草稿时，我可以看到嵌套在输出中的更新的basicRecipe。 当我尝试返回数组即draft.basicRecipe

时，出现以下错误

 [Immer] An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft

解决方法

此代码是一团糟。您正在使用map来返回一个新数组，但同时也试图对原始草稿对象进行变异。

这仍然难以理解且令人困惑，但是至少通过使用forEach而不是map，我们只是在变异，而不是试图同时做两件事。

let temparray1 = produce(state,(draft) => {
  draft.basicRecipe.forEach((item) => {
    let element = draft.recipeBasicRecipes.find((e) => e._id === item._id);
    if (element) {
      item.details.forEach((e) => {
        let detail = element.details.find((d) => d._id === e._id);
        if (detail) {
          e.rate = detail.rate;
        }
      });
    }
  });
});