使用react-windrose-chart遇报错：角度超出0-360范围求助

问题根源分析 #

1. 数据格式错误
   你构造data对象时，给direction和speed套了多余的数组包裹：

   const data = {
     direction: [roseData.map((r)=>r.avgWindDir )], // 结果为二维数组 [[dir1, dir2...]]
     speed:  [roseData.map((r)=>r.avgWindSpeed)] // 同样为二维数组 [[speed1, speed2...]]
   }
   

   calculateWindRose函数要求接收一维数组的风向和风速数据，二维数组会导致函数内部处理时读取到非预期值，进而触发范围校验错误。

2. 初始空数据触发异常
   组件首次渲染时roseData是空数组，此时调用calculateWindRose会处理空的方向数据，函数内部逻辑因此抛出异常。

修复方案 #

1. 修正数据结构 #

去掉direction和speed外层的数组包裹，直接使用map返回的一维数组：

const data = {
  direction: roseData.map(r => r.avgWindDir),
  speed: roseData.map(r => r.avgWindSpeed)
}

2. 增加数据校验与条件渲染 #

确保只有当roseData存在有效数据时，才执行calculateWindRose计算：

// 仅在有数据时计算风玫瑰数据
const windRoseData = roseData.length > 0 ? calculateWindRose(data) : null;

同时在渲染Chart组件时增加判断，避免空值传入：

return(
  <div>
    {windRoseData && (
      <Chart
        chartData={windRoseData.chartData}
        columns={windRoseData.columns}
        responsive={true}
        legendGap={10}
      />
    )}
  </div>
);

3. 可选：风向数据二次校验 #

即使API返回数据合规，也可以在前端做一层过滤，确保所有风向值严格处于0-360范围内：

const directionData = roseData.map(r => r.avgWindDir).filter(dir => dir >= 0 && dir <= 360);
const speedData = roseData
  .map((r, idx) => {
    const dir = roseData[idx].avgWindDir;
    return dir >=0 && dir <=360 ? r.avgWindSpeed : null;
  })
  .filter(speed => speed !== null);

const data = {
  direction: directionData,
  speed: speedData
}

修改后的完整代码 #

import React, {useState, useEffect} from "react";
import { Chart } from "react-windrose-chart";
import { calculateWindRose } from "react-windrose-chart";

const RoseChart = () => {
  const [roseData,setRoseData] = useState([]);
    
  useEffect(() =>{
      fetchData();
  }, []);

  const fetchData = async () => {
      try{
          const response = await fetch('http://localhost:3001/weather');
          const jsonData = await response.json();
          setRoseData(jsonData);
      }catch (error) {
          console.log('Error fetching data', error);
      }
  };
  
  // 修正数据结构并做二次校验
  const directionData = roseData.map(r => r.avgWindDir).filter(dir => dir >= 0 && dir <= 360);
  const speedData = roseData
    .map((r, idx) => (directionData.includes(roseData[idx].avgWindDir) ? r.avgWindSpeed : null))
    .filter(speed => speed !== null);

  const data = {
    direction: directionData,
    speed: speedData
  };
  
  // 有数据时才执行计算
  const windRoseData = roseData.length > 0 ? calculateWindRose(data) : null;

  return(
    <div>
      {windRoseData && (
        <Chart
          chartData={windRoseData.chartData}
          columns={windRoseData.columns}
          responsive={true}
          legendGap={10}
        />
      )}
    </div>
  );
};

export default RoseChart;

内容的提问来源于stack exchange，提问作者Radoslav Takvoryan