lobehub / lobe-chat

🤯 Lobe Chat - an open-source, modern-design AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Ollama / Azure / DeepSeek), Knowledge Base (file upload / knowledge management / RAG ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT/ Claude application.
https://chat-preview.lobehub.com
Other
45.34k stars 10.2k forks source link

[Bug] AssistantCard: React does not recognize the `createAt` prop on a DOM element #4794

Open lc-soft opened 4 days ago

lc-soft commented 4 days ago

📦 部署环境

Official Preview, Vercel

📌 软件版本

19da5e419d8339a047a9175358c6b1b5f0794355

💻 系统环境

Ubuntu

🌐 浏览器

Chrome

🐛 问题描述

在开发环境中访问 /discover 页面时会提示错误,终端输出的错误如下:

card-createAt

在 AssistantCard 组件源码添加 console.log 打印 rest 内容:

image

浏览器控制台中能看到 rest 对象中有 createAt 属性:

card-creatAt-log

是否应该为 AssistantCardProps 添加 createAt 属性,然后使用 createdAt || createAt 获取创建时间?

📷 复现步骤

  1. pnpm dev
  2. 打开 http://localhost:3010/discover 页面

🚦 期望结果

无报错

📝 补充信息

No response

lobehubbot commented 4 days ago

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


📦 Deployment environment

Official Preview, Vercel

📌 Software version

19da5e419d8339a047a9175358c6b1b5f0794355

💻 System environment

Ubuntu

🌐 Browser

Chrome

🐛 Problem description

When accessing the /discover page in the development environment, an error will be prompted. The error output by the terminal is as follows:

card-createAt

Add console.log to the AssistantCard component source code to print rest content:

image

You can see in the browser console that there is a createAt attribute in the rest object:

card-creatAt-log

Should I add a createAt property to AssistantCardProps and then use createdAt || createAt to get the creation time?

📷 Steps to reproduce

  1. pnpmdev
  2. Open the http://localhost:3010/discover page

🚦 Expected results

No error reported

📝 Supplementary information

No response

lobehubbot commented 4 days ago

👀 @lc-soft

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.\ 非常感谢您提交 issue。我们会尽快调查此事,并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

dosubot[bot] commented 4 days ago

@lc-soft 你好!我是Dosu,我是一个可以帮助你解决 bug、回答问题并成为贡献者的机器人。如果你有任何疑问或需要帮助,我会在等待人类维护者的过程中为你服务。

The issue you're encountering is due to the createAt prop being passed to a DOM element, which React does not recognize. This is likely because createAt is not a standard HTML attribute, and React warns about unknown props being passed to DOM elements.

To resolve this, you can update the AssistantCard component to handle both createAt and createdAt properties. You can modify the component to use createdAt || createAt to determine the creation date, ensuring that only one of these is used internally and not passed down to DOM elements.

Here's a possible approach:

  1. Update the AssistantCardProps interface to include both createAt and createdAt if not already done.
  2. Inside the AssistantCard component, use a local variable to store the creation date, choosing between createdAt and createAt.
  3. Ensure that this local variable is used in the component logic, and neither createAt nor createdAt is directly passed to any DOM elements.

This approach will prevent the warning by ensuring that only recognized props are passed to DOM elements.

To continue talking to Dosu, mention @dosu.