React Redux 在映射状态后得到 NaN

Question

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

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

我的问题是访问权重值。当我只有一个对象时，映射没有问题，我得到的权重值是一个数字。但是当我将第二个对象添加到状态并映射两个对象中的权重值时，我得到 NaN。地图的结果将进入百分比计算器，这就是为什么我需要这些数字。这是我的应用程序的屏幕截图，其中我只有一个对象：这是我有两个对象的屏幕截图。我还在顶部的 'One Rep Max' 部分调用了 mapWeights，因此它同时显示“300”和“400”。我打算解决这个问题。但这是我开始得到 NaN 的地方：这是我调用 .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;
    }
};

如有任何帮助，我们将不胜感激。

Answer 1

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

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: 300
  },
  {
    name: "Squat",
    weight: 400
  }
];

const percentValues = [100, 95, 90, 85, 80, 75, 70, 65, 60, 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",
    weight: 300
  },
  {
    name: "Squat",
    weight: 400
  }
];

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

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

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

console.log(dataWithPercentages);

React Redux 在映射状态后得到 NaN

React Redux getting NaN after mapping state

mapping

state

reactjs

redux

redux-form