Got error: `RangeError: invalid time value` while set XAxis date value use date-fns

Question

我正在使用重新图表将数据数组呈现为面积图。我的代码使用以下行从远程 API 获取 mydata 数组：

const [myData, setMyData] = useState([]);
useEffect(() => {
const getData = async () => {
      const resp =  await fetch('https://api.contoso.xyz/api');
      const jsonResp = await resp.json();
      setMyData(jsonResp);
    };

    getData();
    }, []);

数据 JSON 数组如下所示：

[
{"date": "2022-03-01",
"value": 123456,
},
{"date": "2022-03-02",
"value": 100000,
}
]

React 图表组件如下所示：

...
import { format, parseISO } from date-fns
...
<ResponsiveContainer width="100%" height={400}>
  <AreaChart data={mydata} >
      <Area type="monotone" dataKey="value" stroke="#82CA9D" fill="#82CA9D" />
      <XAxis dataKey="date" tickFormatter={(str) => {
              const dateObj = parseISO(str);
              return format(dateObj, "MMM d");
            }}/>
     <YAxis />
     <Tooltip />
     <CartesianGrid opacity={0.5}/>
  </AreaChart>
</ResponsiveContainer>

当运行反应站点时，我收到以下错误

RangeError: Invalid time value
    at Em (main.5e916930.js:2:575929)
    at tickFormatter (main.5e916930.js:2:577712)
    at Function.value (main.5e916930.js:2:406091)
    at Function.value (main.5e916930.js:2:404369)
    at a.value (main.5e916930.js:2:402724)
    at a.value (main.5e916930.js:2:403854)
    at Eu (main.5e916930.js:2:143688)
    at Su (main.5e916930.js:2:143484)
    at pl (main.5e916930.js:2:178073)
    at lc (main.5e916930.js:2:163912)

奇怪的是，如果我将 XAxis 部分更改为下面的内容，本地运行实际上会成功显示图表。

<XAxis dataKey="date" tickFormatter={(str) => {
              const dateObj = parseISO(str);
              return format(dateObj, "MMM d");
              return str;
            }}/>

现在，如果我从上面的代码部分中删除 return str;，该图表仍将在本地工作。当图表不起作用时，如果我在 const dateObj = parseISO(str); 前面添加 console.log(str)，我在控制台中获得的输出显示 auto 而不是实际的日期字符串。

不确定是什么导致了这种行为。有人知道我的代码是怎么回事吗？

Answer 1

我只是猜想你可能错过了将你的 string 日期解析为 Date 类型。 format from date-fns 当您将字符串作为输入传递时抛出 RangeError: Invalid time value。

下面是包含您的代码的沙箱，它运行良好。

Answer 2

找出问题所在。 myData 数组在最初加载页面时尚未填充（因为提取是异步的？）。这导致 str 值为 auto 或 0（不知道确切原因）。每次我 re-started 在本地测试站点时都会发生这种情况。如果我在本地测试站点已经启动时更改代码，则图表会成功加载而不会出现问题，因为数组已经被填充。

为了解决这个问题，我在重新格式化日期字符串之前添加了一个检查条件。

if ( str === 'auto' || str === 0){
      return str;
}else{
      console.log(str
      const dateObj = parseISO(str);
      return format(dateObj, "MMM d");
  }

不确定这是否是解决此类问题的最佳方法。欢迎大家提出更好的建议。

Got error: `RangeError: invalid time value` while set XAxis date value use date-fns

Got error: `RangeError: invalid time value` while set XAxis date value use date-fns

javascript

reactjs

recharts