使用react-windrose-chart遇到问题；未捕获错误：超过 360 或低于 0

Question

问题描述

我在 React 应用程序中遇到风向值问题。尽管从 API 端点获取数据可以确保风向值在 0 到 360 度的范围内，但我还是遇到了错误，指出这些值要么超过 360 度，要么低于 0 度。

想法

我怀疑错误可能源自calculateWindRose函数。进一步调查此功能的实现可能有助于确定问题的原因。

请求帮助

如果有人遇到过类似问题或有使用带有 API 端点的 React-windrose-chart 的经验，请提供解决此问题的帮助或见解。

错误

该错误表明风向值超过 360 或低于 0，尽管获取的数据预计符合该范围。

代码

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 data = {
    direction: [roseData.map((r)=>r.avgWindDir )],
    speed:  [roseData.map((r)=>r.avgWindSpeed)]
  }
  
  const windRoseData = calculateWindRose(data);

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

export default RoseChart;

## What I've Tried

I've tried numerous approaches to resolve this issue, but unfortunately, none have been successful so far. I've meticulously examined all the values both manually and through console logging of the fetched data, yet I couldn't identify any anomalies. Additionally, I've thoroughly inspected the database to ensure there are no issues with the stored values. Despite these efforts, the error persists.

Answer 1

您可以尝试在获取数据后初始化

calculateWindRose

，也许可以解决您的问题！

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();
  
          const data = {
              direction: [jsonData.map((r)=>r.avgWindDir )],
              speed:  [jsonData.map((r)=>r.avgWindSpeed)]
          }
  
          const windRoseData = calculateWindRose(data);
          setRoseData(windRoseData);
      }catch (error) {
          console.log('Error fetching data', error);
      }
  };

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

export default RoseChart;