2017-07-17 51 views
1

我試圖通過express發送一個React組件樹,並且我的組件數組包含關鍵$$typeof: Symbol.for('react.element')屬性。我正在使用res.send。該對象的其餘部分來自該屬性除外。我被告知它可能與Symbol.for不可枚舉有關? JSON.stringify也剝奪財產。帶有Symbol屬性get的JavaScript對象被Stringify刪除

我將問題的範圍縮小到了具有Symbol值的屬性。這反映in the documentation for stringify.。任何人都可以解釋爲什麼這種情況或解決方法是什麼?

const obj1 = { 
 
    'stringKey': Symbol.for('String Value'), 
 
    boolKey: true, 
 
    numKey: 1 
 
} 
 

 
const obj2 = {...obj1, 'stringKey': 'Plain String'} 
 

 
console.log(JSON.stringify(obj1)) 
 
console.log(JSON.stringify(obj2))

+0

嗯,編組組件的整棵樹是不是我以前見過。在大多數情況下,確定所述樹的狀態或其他對象是通過連線序列化的。在架構方面,這是一個很難的要求嗎? – enjoylife

+0

我正在補上。我正在嘗試使用這個工具https://github.com/cerebral/marksy,因此我正在解析服務器上的降價文件,然後將解析的內容發送到客戶端並從那裏進行渲染。 – motleydev

+0

哦,我明白了,你的服務器端渲染?那麼在這種情況下,你應該使用'renderToString'的輸出。查看文檔,並且即使您不使用redux本教程有一些很好的信息,http://redux.js.org/docs/recipes/ServerRendering.html – enjoylife

回答

0

由於符號被用作值,你可以使用自定義reviver

const obj1 = { 
 
    'stringKey': Symbol.for('String Value'), 
 
    boolKey: true, 
 
    numKey: 1 
 
} 
 

 
const obj2 = {...obj1, 'stringKey': 'Plain String'} 
 

 
console.log(JSON.stringify(obj1, (name, value) => { 
 
    if(typeof value === 'symbol') { 
 
     value = `$$${Symbol.keyFor(value)}` 
 
    } 
 
    return value 
 
})) 
 
console.log(JSON.stringify(obj2))

使用定製 replacer該格式符號你可以在接收端恢復的字符串

樸素的莫。你可以更好地列出應該作爲註冊表符號恢復的道具。

const a = {a: Symbol.for('a')} 
 
const str = JSON.stringify(a, (k,v) => typeof v === 'symbol' ? `$$Symbol:${Symbol.keyFor(v)}` : v) 
 
const b = JSON.parse(str, (k,v) => { 
 
    const matches = v.match && v.match(/^\$\$Symbol:(.*)$/) 
 
    return matches ? Symbol.for(matches[1]) : v 
 
}) 
 

 
console.log(a, str, b, a.a === b.a)