React+Nivo Line图表渲染报错：无法转换undefined/null为对象

1. 处理数据加载时机与初始状态 #

组件首次渲染时，API请求尚未完成，数据状态大概率是null或undefined，直接传给Nivo Line会触发类型错误：

• 将数据状态初始化为空数组：const [chartData, setChartData] = useState([])，而非null或未定义值。
• 渲染图表前添加条件判断，避免空值传入：

{chartData.length > 0 ? (
  <ResponsiveLine
    data={chartData}
    // 其他图表配置
  />
) : (
  <div>数据加载中...</div>
)}

2. 验证数据格式匹配Nivo Line要求 #

即使MongoDB返回结构正常，也可能和Nivo的格式要求不匹配：

• Nivo Line默认要求每个数据项包含x（横轴）和y（纵轴）字段，若你的数据用了自定义字段（比如date、levyAmount），需在配置中明确指定：

<ResponsiveLine
  data={chartData}
  xScale={{ type: 'time', field: 'date' }}
  yScale={{ type: 'linear', field: 'levyAmount', min: 'auto' }}
  // 其他配置
/>

• 确保传入data的是数组类型，若API返回嵌套结构（比如{ result: [...] }），需先提取数组部分：setChartData(rawData.result)。

3. 过滤数据中的无效字段 #

单个数据点的x/y字段为null或undefined，也会导致Nivo处理失败：

• 在接收API数据后，清洗无效数据：

useEffect(() => {
  const fetchData = async () => {
    const res = await fetch('/api/levy-data');
    const rawData = await res.json();
    const cleanedData = rawData.filter(item => 
      item.date !== null && item.levyAmount !== undefined
    );
    setChartData(cleanedData);
  };
  fetchData();
}, []);

4. 定位报错的具体触发点 #

根据报错堆栈信息，锁定问题来源：

• 若堆栈指向Nivo内部的Object.keys()/Object.entries()调用，说明传入的某个配置参数是null/undefined（比如data、xScale.field）。
• 在组件中添加console.log(chartData)，渲染前打印数据，确认是否符合预期格式。

5. 检查图表必填配置项 #

Nivo Line部分配置项缺失会引发异常：

• 确保xScale和yScale的field属性已正确设置，或数据中存在默认的x/y字段。
• 禁止将data属性设为undefined，始终传递数组（空数组也可）。

内容的提问来源于stack exchange，提问作者Ian Probets