通过根元素传递React Props时数据丢失问题求助

问题原因 #

你遇到的截断问题源于：JSON.stringify(events)生成的字符串包含双引号，直接放入HTML的data-events="..."属性中时，HTML会把第一个内部双引号识别为属性值的结束标记，导致数据仅保留到[{"就被截断。

解决方案 #

1. 修改API代码，获取纯JavaScript对象

Mongoose的find()返回的是带额外方法和属性的文档对象，建议用.lean()转成普通JS对象，避免序列化异常：

module.exports.home_get = async (req,res) => {
    try {
        await connectToDb()
        // 使用.lean()获取纯JS对象，便于JSON序列化
        const events = await Event.find({}).lean()
        res.locals.events = events
        res.render("events.ejs")
    } catch (error) {
        throw new Error(error)
    }
}

2. 修正EJS中的数据传递方式

有两种方式避免HTML属性值截断：

方式一：转义JSON字符串中的双引号

把JSON里的双引号替换为HTML实体"，确保HTML解析时不会提前闭合属性：

<%- include('./partials/_header.ejs') -%>
    <div id="myEvents" data-events="<%- JSON.stringify(events).replace(/"/g, '&quot;') %>"></div>
<%- include('./partials/_footer.ejs') -%>

方式二：用单引号包裹data属性值

JSON字符串内部使用双引号，用单引号包裹属性值不会产生冲突：

<%- include('./partials/_header.ejs') -%>
    <div id="myEvents" data-events='<%- JSON.stringify(events) %>'></div>
<%- include('./partials/_footer.ejs') -%>

3. 在React中解析完整的JSON数据

dataset中的值是字符串类型，需先解析为JSON对象再传递给组件：

const eventsNode = document.getElementById('myEvents');
// 解析完整的JSON字符串为JavaScript对象
const eventsData = JSON.parse(eventsNode.dataset.events);
const eventsRoot = createRoot(eventsNode);
eventsRoot.render(
  <StrictMode>
    <Events deneme={eventsData} />
  </StrictMode>
);

验证结果 #

完成以上修改后，React组件接收的deneme props会是完整的事件数组，而非截断后的字符串。

内容的提问来源于stack exchange，提问作者Kadir Üretir