React Redux 在映射状态后获取 NaN

编程问答 2022-04-22

问题描述

我在映射我的州时遇到问题。我的状态包含一个对象数组，每个对象有两个键：值对：

[
 {
  name: '',weight: 0
 }
]

我的问题是访问权重值。当我只有一个对象时，映射没有问题，我将权重的值作为一个数字。但是当我向状态添加第二个对象并映射两个对象中的权重值时，我得到 NaN。 地图的结果将进入百分比计算器，这就是我需要数字的原因。 这是我的应用程序的屏幕截图，其中我只有一个对象：

enter image description here

这是我有两个对象的屏幕截图。我还在顶部的“One Rep Max”部分调用了 mapWeights，因此它同时显示了“300”和“400”。我打算解决这个问题。但这是我开始得到 NaN 的地方：

enter image description here

 这是我调用 .map 的方式：

    const mapWeights = props.weight.map(value => parseInt(value.movementWeight));

这里是我调用映射结果的地方：

  useEffect(() => {
        const arr = [];
        let percentage = 100;
        while (percentage > 50 ) {
            arr.push([percentage,(mapWeights * percentage) / 100]);
            percentage -= 5;
        }
        setResults(arr);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);

如果你需要我的减速器：

const addMovementReducer = (state = [],action) => {
    switch (action.type) {
        case ADD_MOVEMENT: 
            return [ ...state,action.payload ];
        default:
            return state;
    }
};

任何帮助将不胜感激。

解决方法

您可以创建一个函数，该函数接受一个特定的权重值，并将百分比值数组映射到该权重的百分比数组。

const percentValues = [100,95,90,85,80,75,70,65,60,55];

const computePercentages = (weight) =>
  percentValues.map((percent) => (weight * percent) / 100);

然后在要计算这些百分比数组的地方使用 computePercentages 实用程序。

const data = [
  {
    name: "Bench",weight: 300
  },{
    name: "Squat",weight: 400
  }
];

const percentages = data.map((el) => {
  return computePercentages(el.weight);
});


const data = [
  {
    name: "Bench",weight: 400
  }
];

const percentValues = [100,55];

const computePercentages = (weight) =>
  percentValues.map((percent) => (weight * percent) / 100);

const percentages = data.map((el) => {
  return computePercentages(el.weight);
});

console.log(percentages);

在 React 中，您可能更希望将原始数据与派生数据一起映射。为此，您可以将数据“合并”到一个易于映射到 JSX 的单个数组中。

const data = [
  {
    name: "Bench",55];

const computePercentages = (weight) =>
  percentValues.map((percent) => (weight * percent) / 100);

const dataWithPercentages = data.map((el) => {
  return {
    ...el,percentages: computePercentages(el.weight),};
});

console.log(dataWithPercentages);

mappingmappingreactjsreactjsreactjsreactjsreduxreduxreduxreduxredux-formstatestatestate