SparklineComponent(...)：渲染没有返回任何内容答案

【问题标题】：SparklineComponent(...): Nothing was returned from renderSparklineComponent(...)：渲染没有返回任何内容
【发布时间】：2022-08-23 14:36:00
【问题描述】：

我正在构建这个项目，并使用来自 syncfusion 的图表。我收到了这篇文章标题中的错误。仅当我放大和缩小一堆或关闭侧栏几次时。实现这一点所需的时间是完全随机的。这是几段代码

const SparkLine = ({id, height, width, color, data, type, currentColor}) => {

  return (
    
    <SparklineComponent
   
      height={height}
      width={width}
      lineWidth={1}
      valueType=\"Numeric\"
      fill={color}
      border={{ color: currentColor, width: 2 }}
      dataSource={data}
      xName=\"xval\"
      yName=\"yval\"
      type={type}
      tooltipSettings={{
        visible: true,
        format: \'${xval} : data ${yval}\',
        trackLineSettings: {
          visible: true
        }
      }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
    
  ) 

  
}

那是返回 SparklineComponent 的组件，它来自库 @syncfusion/ej2-react-charts。它是说它是该库中的实际 SparklineComponent，而不是我制作的任何组件，它没有返回任何内容。这是导致我的 index.js 的代码链的其余部分

              <div className=\'mt-5\'>
                <SparkLine 
                  currentColor=\'blue\'
                  id=\'line-sparkline\'
                  type=\'Line\'
                  height=\'80px\'
                  width=\'250px\'
                  data={SparklineAreaData}
                  color=\'blue\'
                />
              </div>

这只是来自名为 Ecommerce 的组件的一段代码。它在 jsx 中的某一点从上方返回 SparkLine 组件。下一个是

              <Routes>
                {/* Dashbord */}
                <Route path=\'/\' element={<Ecommerce />} />
                <Route path=\'/ecommerce\' element={<Ecommerce />} />

那是我的 app.js，它由我的 index.js 中的上下文提供程序包装

ReactDOM.render(
    
    <ContextProvider>
        <App />        
    </ContextProvider>
    , document.getElementById(\'root\')
    
);

问题似乎来自我在上下文提供程序中的状态挂钩的 activeMenu 变量，当您单击相应的按钮或放大关闭（小屏幕尺寸）时，该变量用于打开和关闭侧栏。这是我的 ContextProvider

export const ContextProvider = ({children}) => {
    
    const [activeMenu, setActiveMenu] = useState(true);
    const [isClicked, setIsClicked] = useState(initialState);
    const handleClick = (clicked) => {
        setIsClicked({ ...initialState, [clicked]: true})
    }
    const [screenSize, setScreenSize] = useState(undefined)
    console.log(`context provider ${activeMenu}${isClicked.userProfile}${initialState.userProfile}`);
    return (
        <StateContext.Provider value={{ activeMenu, setActiveMenu, isClicked, 
        setIsClicked, handleClick, screenSize, setScreenSize,}}>

            {children}

        </StateContext.Provider>
    )
}


export const useStateContext = () => useContext(StateContext);

当我从 app.js 中删除我从 useStateContext 中提取的 activeMenu 变量时，我已经导入了它，一切正常。我完全不知道为什么。

标签： reactjs react-hooks react-context syncfusion

【解决方案1】：

来自 Syncfusion 的问候。

我们使用带有 Sparkline 组件的侧边栏创建了一个反应应用程序来测试报告的场景。但是，我们无法复制报告的场景。请在下面的 stackblitz 链接中找到您的示例参考。

示例链接：https://stackblitz.com/edit/react-u4jpfx?file=index.js

如果报告的场景仍然存在，请修改上述示例以复制报告的场景。这将有助于我们进一步分析并更好地为您提供帮助。同时，请与我们分享以下要求的详细信息。

您正在使用的软件包版本在您的代码中，我们提到您正在使用 activemenu。它用于什么目的？与我们分享任何屏幕截图或视频以详细了解该场景

问候，

斯韦莎

【讨论】：