Javascript TypeError:无法读取属性'；地图'；未定义（REACTJS）的类型

我需要将多个函数导入到我的组件，但出现以下错误：

当nintCards函数在组件中时，一切都正常工作，但当我想要导入它时，它会给我这个错误。理论上，它不能读取数据，所以它表示未定义，但我将参数传递给它，所以我不知道它为什么显示错误

非常感谢你的建议，这对我很有帮助

函数sparams.js

/* Refactoring functions */

const macrosIndex = (foodType, arrFoods) => {
  const indices = [];

  let idx = arrFoods.map((e) => e.type).indexOf(foodType);
  while (idx !== -1) {
    indices.push(idx);

    idx = arrFoods.map((e) => e.type).indexOf(foodType, idx + 1);
  }

  return indices;
};

const gMacrosIntCards = (macro, arrFoods) => {
  let gProtIntCards = [];

  return (gProtIntCards = arrFoods.map((item, i) => {
    return (item = arrFoods[i][macro]);
  }));
};
const addMacros = (nintCards, macroIntCards, arrFoods) => {
  let arrAdd = [];

  arrAdd = nintCards(arrFoods).map((item, i) => {
    return (item = nintCards(arrFoods)[i] * macroIntCards()[i]);
  });

  return arrAdd.reduce((a, b) => a + b);
};

function addFoodWeight(arrFoods,addOuputsFoods,inputCarb,inputProt, inputLip) {
  arrFoods.forEach((item, i) => {
    item.foodWeight = item.weight_int * addOuputsFoods(arrFoods, inputCarb,inputProt, inputLip)[i];
  });
}

function nintCards(arrFoods) {
  // return array

  return arrFoods.map((item) => {
    return item.n_int_card;
  });
  
}

export {macrosIndex, gMacrosIntCards, addMacros, addFoodWeight, nintCards};

---

组件（arrFoods是第二行函数addOuputsFoods:const arrOuputsFoods=nintCards（arrFoods）中的传递方式参数）

import React，{useContext}来自“React”；
从“./../UserContext.js”导入{UserContext}；
从“反应数字格式”导入数字格式；
从“./../functions/functionsParams”导入{macrosIndex，gMacrosIntCards，addMacros，addFoodWeight，nintCards，}；
常量输入宏=（）=>{
常数{
输入保护，
setInputProt，
输入，
setInputLip，
输入CARB，
setInputCarb，
阿伦食品公司，
}=useContext（用户上下文）；
函数updateInputProt（事件）{
常量inputProtein=event.target.value；
setInputProt（inputProtein）；
添加食物重量（arrFoods、addOuputsFoods、inputCarb、inputProt、inputLip）；
}
函数updateInputLip（事件）{
const inputlips=event.target.value；
设置InputLip（InputLips）；
添加食物重量（arrFoods、addOuputsFoods、inputCarb、inputProt、inputLip）；
}
函数updateInputCarb（事件）{
常量inputCarbohidrats=event.target.value；
setInputCarb（inputCarbohidrats）；
添加食物重量（arrFoods、addOuputsFoods、inputCarb、inputProt、inputLip）；
}
/////////////////
/*函数addFoodWeight（）{
arrFoods.forEach（（项目，i）=>{
item.foodWeight=item.weight_int*addOuputsFoods（）[i]；
});
}  */
/*功能卡（）{
//返回数组
返回arrFoods.map（（项目）=>{
返回项目n\u int\u卡；
});
} */
函数addOutsFoods（）{
//插入淀粉类食品的交换
const arrOuputsFoods=nintCards（）；
arrOuputsFoods.forEach（（i）=>{
ArroupOutsFoods[starchyFoodsIndex（）[i]]=
nintStarchyFoods（）/starchyFoodsIndex（）.长度；
});
//插入proteinFoods的交换
arrOuputsFoods.forEach（（i）=>{
arrOuputsFoods[proteinFoodIndex（）[i]]=
nintProtein（）/proteinFoodIndex（）.长度；
});
//插入脂肪交换
arrOuputsFoods.forEach（（i）=>{
arrOuputsFoods[lipidIndex（）[i]=nintlipses（）/lipidIndex（）.length；
});
返回Arouputsfoods；
}
函数starchyFoodsIndex（）{
返回宏观指数（“淀粉食品”，arrFoods）；
}
淀粉食品的功能（）{
返回（inputCarb-totalHc（））/14；
}
函数totalHc（）{
返回addMacros（任天堂卡、gHcIntCards）；
}
函数proteinFoodIndex（）{
返回宏索引（“proteinFoods”，arrFoods）；
}
函数lipidsIndex（）{
返回宏观指数（“脂肪”、食品）；
}
功能总蛋白（）{
淀粉食品指数（）；
返回addMacros（nintCards、GProIntCards）；
}
函数totalipids（）{
淀粉食品指数（）；
proteinFoodIndex（）；
返回addMacros（任天堂卡、gLipIntCards）；
}
功能蛋白（）{
返回（inputProt-totalProtein（））/7；
}
函数（）{
返回（inputrip-totalipids（））/5；
}
函数gprotincards（）{
返回GMACrostin卡（“prot”，ARR）；
}
函数gLipIntCards（）{
返回GMACrostin卡（“lip”，即食品）；
}
函数gHcIntCards（）{
返回GMACrostin卡（“hc”，arrFoods）；
}
//////////////////////
常量formatProt=（）=>{
设formatProt=Math.round（inputProt）；
/*formatProt=`${formatProt}g`*/
返回formatProt；
};
常量formatLip=（）=>{
返回Math.round（inputLip）；
};
常量formatCarb=（）=>{
返回数学圆（inputCarb）；
};
返回(
{" "}
g保护
{" "}
g脂肪
{" "}
碳水化合物
);
};
导出默认输入宏；
感谢你们的支持，我能够解决这个问题，我还必须将参数arrFoods传递给addMacros函数&const arrOuputsFoods=nintCards（arrFoods）
 我看不出您在哪里声明
addOputsFoods
中使用的
arrFoods
变量。这段代码应该会抛出一个与您显示的不同的错误，关于未声明的变量。PS我在您的代码中没有看到任何特定的反应-即使这在React应用程序中使用，这段代码实际上没有使用任何特定于ReactarrFoods的东西，而是在第二行函数AddOutsFoods中传递how to参数：const arrOuputsFoods=nintCards（arrFoods）；好的，这就是我所指的-在这一点上什么是
arrFoods
？在您为更新共享的hanks代码中没有这样的变量，但尽管您可能希望它是一个对象数组，但从错误消息中可以明显看出，它实际上是未定义的。请尝试单步执行您的代码以自己调试（可能是
UserContext
中出现了错误）-我们无法帮助您完成这一点，因为您没有共享足够的代码。
import React, { useContext } from "react";
import { UserContext } from "../../UserContext.js";
import NumberFormat from "react-number-format";

import { macrosIndex, gMacrosIntCards, addMacros, addFoodWeight, nintCards, } from "../../functions/functionsParams";





const InputMacros = () => {
  const {
    inputProt,
    setInputProt,
    inputLip,
    setInputLip,
    inputCarb,
    setInputCarb,
    arrFoods,
  } = useContext(UserContext);

  function updateInputProt(event) {
    const inputProtein = event.target.value;
    setInputProt(inputProtein);
    addFoodWeight(arrFoods,addOuputsFoods,inputCarb,inputProt, inputLip);
  }
  function updateInputLip(event) {
    const inputLipids = event.target.value;
    setInputLip(inputLipids);
    addFoodWeight(arrFoods,addOuputsFoods,inputCarb,inputProt, inputLip);
  }
  function updateInputCarb(event) {
    const inputCarbohidrats = event.target.value;
    setInputCarb(inputCarbohidrats);
    addFoodWeight(arrFoods,addOuputsFoods,inputCarb,inputProt, inputLip);
  }

  /////////////////

 /*  function addFoodWeight() {
    arrFoods.forEach((item, i) => {
      item.foodWeight = item.weight_int * addOuputsFoods()[i];
    });
  }  */

  /* function nintCards() {
    // return array

    return arrFoods.map((item) => {
      return item.n_int_card;
    });

  } */

  function addOuputsFoods() {
    //insert the exchanges of starchyFoods
    const arrOuputsFoods = nintCards();

    arrOuputsFoods.forEach((i) => {
      arrOuputsFoods[starchyFoodsIndex()[i]] =
        nintStarchyFoods() / starchyFoodsIndex().length;
    });

    //insert the exchanges of proteinFoods
    arrOuputsFoods.forEach((i) => {
      arrOuputsFoods[proteinFoodIndex()[i]] =
        nintProtein() / proteinFoodIndex().length;
    });
    //insert the exchanges of fats
    arrOuputsFoods.forEach((i) => {
      arrOuputsFoods[lipidsIndex()[i]] = nintLipids() / lipidsIndex().length;
    });

    return arrOuputsFoods;
  }

  function starchyFoodsIndex() {
    return macrosIndex("starchyFoods", arrFoods);
  }

  function nintStarchyFoods() {
    return (inputCarb - totalHc()) / 14;
  }

  function totalHc() {
    return addMacros(nintCards, gHcIntCards);
  }

  function proteinFoodIndex() {
    return macrosIndex("proteinFoods", arrFoods);
  }

  function lipidsIndex() {
    return macrosIndex("fats", arrFoods);
  }

  function totalProtein() {
    starchyFoodsIndex();

    return addMacros(nintCards, gProtIntCards);
  }

  function totalLipids() {
    starchyFoodsIndex();

    proteinFoodIndex();

    return addMacros(nintCards, gLipIntCards);
  }

  function nintProtein() {
    return (inputProt - totalProtein()) / 7;
  }

  function nintLipids() {
    return (inputLip - totalLipids()) / 5;
  }

  function gProtIntCards() {
    return gMacrosIntCards("prot", arrFoods);
  }

  function gLipIntCards() {
    return gMacrosIntCards("lip", arrFoods);
  }

  function gHcIntCards() {
    return gMacrosIntCards("hc", arrFoods);
  }

  //////////////////////

  const formatProt = () => {
    let formatProt = Math.round(inputProt);
    /* formatProt=`${formatProt}g` */
    return formatProt;
  };

  const formatLip = () => {
    return Math.round(inputLip);
  };

  const formatCarb = () => {
    return Math.round(inputCarb);
  };

  return (
    <form className="col p-3 mt-4">
      <div className="form-row d-flex flex-row ">
        <div className="col-md-4 mb-3">
          <div className="divMacros">
            <label>
              {" "}
              <h4>g Prot</h4>
            </label>
            <NumberFormat
              name="inputProt"
              onChange={updateInputProt}
              type="number"
              className="inputMacros mt-1"
              placeholder="Pro g"
              /* suffix={'g'} */
              /* displayType={'text'} */
              value={formatProt()}
            ></NumberFormat>
          </div>
        </div>
        <div className="col-md-4 mb-3">
          <div className="divMacros">
            <label>
              {" "}
              <h4>g Fats </h4>
            </label>
            <input
              name="inputLip"
              onChange={updateInputLip}
              type="number"
              className="inputMacros mt-1"
              placeholder="Lip g"
              value={formatLip()}
            ></input>
          </div>
        </div>
        <div className="col-md-4 mb-3">
          <div className="divMacros">
            <label>
              {" "}
              <h4>g Carb </h4>
            </label>
            <input
              name="inputCarb"
              onChange={updateInputCarb}
              type="number"
              className="inputMacros mt-1"
              placeholder="CH g"
              value={formatCarb()}
            ></input>
          </div>
        </div>
      </div>
    </form>
  );
};

export default InputMacros;