如何在React中遍历charts.js库中的图表数组

Question

我以前已经无数次使用过map函数，但这次的问题让我感到困扰。

我有一个手风琴组件，它通过map函数遍历图表标题，以便我可以选择自己想要的图表——这部分功能正常。
当我选择一个图表后，它会在旁边的查看器中显示出来——这部分也正常工作。
如果我想将选中的图表保存到我的pinnedcharts集合中，只需点击图钉图标，它就会被添加到pinnedcharts数组中——这部分在某种程度上也能工作。

问题：

如果你检查控制台，会发现pinnedcharts数组实际上包含了不同（已固定）的图表（取决于你固定了多少个）。但在屏幕上显示的所有图表都是当前图表，而非各自不同的图表。

为了更好地理解这个问题，建议直接查看下面提供的CodePen链接。以下是相关的映射代码片段：

{pinnedcharts.map((chart, index) => {
    return (
        
            
                
                    
                        
                            
                                
                                    {chart.title}
                                
                            
                            
                                
                                    {pinned ?  : }
                                
                            
                        
                        {/* 这里应该是从chart对象中获取数据 */}
                         {/* {chart.wbrdata} 无法正常工作 */}
                    
                
            
        
    );
})}

在组件的data属性处使用{chart.wbrdata}时出错，这是因为不能直接对它进行映射。这确实说得通，因为wbrdata是一个对象而非数组。然而，在查看器中，虽然wbrdata能正常工作，那是因为图表库（Chart.js）知道如何根据其内部结构来选择wbrdata内的数据集。

可以看到标题和Id都正确地映射出来了，但是数据集部分没有正确映射。

非常感谢任何提前提供的帮助。

CodePen 链接

Micah · Answer

在pinnedCharts.map内部直接将chart传递给Line组件的data属性应该可以解决问题。

经过快速查看您提供的CodeSandbox示例，
chart对象上不存在wbrdata属性的原因是，在将图表添加到固定图表列表时，并未将其作为新属性添加。

相反，它是作为一个完整的图表对象被追加到固定图表列表中的，当您遍历pinnedCharts数组时，可以直接访问这个列表中的图表对象及其属性。

希望这能帮到您。

Jeff · Answer

您似乎遇到了一个问题：当将新图表固定到pinnedcharts数组时，图表的状态并未正确更新。

这个问题可能是由于React中的Chart.js Line组件没有为每个独立的图表接收到正确的数据属性，或者是您的应用程序状态管理存在问题。

const MyChartsComponent = () => {
  const [pinnedcharts, setPinnedCharts] = useState([]);

  // 这个函数应处理固定图表的逻辑
  // 应该用新的固定图表列表更新状态
  const handlePinnedPin = (chartToPin) => {
    // 更新pinnedcharts数组的逻辑
    // 例如，如果你想切换图表的固定状态
    setPinnedCharts(prevCharts => {
      if (prevCharts.includes(chartToPin)) {
        return prevCharts.filter(chart => chart !== chartToPin);
      } else {
        return [...prevCharts, chartToPin];
      }
    });
  };

  return (
    // 您的返回值部分
  );
};

// 辅助函数，判断图表是否已固定
const isChartPinned = (chart) => {
  // 你的逻辑实现
};

export default MyChartsComponent;

希望这能帮到您！

Allan Cameron · Answer

https://codesandbox.io/p/devbox/condescending-antonelli-yykcdm" rel="nofollow noreferrer">这是修复后的版本

您之前传递了 wbrdata，但实际上应该使用来自 map 函数中的 chart 变量。


  {pinnedcharts.map((chart, index) => (
    
      
        
          
            
              
                
                  {chart.title}
                
              
              
                
                  {pinned ?  : }
                
              
            
            {/* 使用 chart 替换原来的 wbrdata */}
            
          
        
      
    
  ))}