类型错误：无法读取未定义的属性“地图”（REACTJS）

Question

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

当 nintCards 函数在组件中时，一切正常，但是当我想导入它时，它给了我那个错误。理论上它无法读取 arrFoods 所以它说 undefined 但我将参数传递给它所以我不知道为什么它会显示错误。

非常感谢您的建议，对我帮助很大。

functionsParams.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};

component (arrFoods 是在第二行函数 addOuputsFoods 中传递如何参数：const arrOuputsFoods = nintCards(arrFoods));

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;

Answer 1

感谢你们的支持，我能够解决它，我不得不将参数 arrFoods 也传递给 addMacros 函数 & const arrOuputsFoods = nintCards(arrFoods);