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

[lc-soft]

📦 部署环境

Official Preview, Vercel

📌 软件版本

19da5e4

💻 系统环境

Ubuntu

🌐 浏览器

Chrome

🐛 问题描述

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

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

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

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

📷 复现步骤

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

🚦 期望结果

无报错

📝 补充信息

No response

[lobehubbot]

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

---

📦 Deployment environment

Official Preview, Vercel

📌 Software version

19da5e4

💻 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:

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

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

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]

👀 @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]

@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.