React Redux 在映射状态后获取 NaN

Posted 2023-02-19

【中文标题】React Redux 在映射状态后获取 NaN

【英文标题】：React Redux getting NaN after mapping state

【发布时间】：2021-09-12 03:12:23

【问题描述】：

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

[
 
  name: '',
  weight: 0
 
]

我的问题是访问权重值。当我只有一个对象时，映射没有问题，我将 weight 的值作为一个数字。但是当我向状态添加第二个对象并映射两个对象的权重值时，我得到 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;
    
;

任何帮助将不胜感激。

【问题讨论】：

mapWeights 是一个数组，那么数组乘以一个数字的值是多少？ NaN 似乎是对的。您期望useEffect 的结果是什么？

@DrewReese 我的目标是将数组中的每个数字添加到 useEffect 并获得该数字的百分比细分。我想这可能不是最好的方法。

“我的目标是将数组中的每个数字添加到 useEffect 并获得该数字的百分比细分。”您能否澄清您指的是哪个数组和数字，以及您的预期结果应该是什么（示例结果数组/对象）？

@DrewReese 我更新了我的问题以包括结果将去哪里的屏幕截图（在“体重”下的图表中）。因此，在我的应用程序中，用户通过表单添加名称和权重，然后将它们作为对象进入我的状态数组。当他们单击提交时，将使用他们提交的名称创建一个按钮。当他们单击该按钮时，他们会进入我上面截屏的页面。我想做的是显示他们点击的任何锻炼的重量。所以如果他们点击“Bench”，它应该会显示“300”的百分比。如果他们点击“蹲”，它应该显示“400”等等。

我没有看到任何添加到您的帖子的屏幕截图或编辑，但我收集到您可能想要处理移动（带有name 和weight 的对象数组）数组并为每个重量生成一个百分比数组。这是正确的吗？你的意思是“所以如果他们点击'Bench'，它应该显示'300'的百分比”？

【参考方案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);