[英]map is not a function in jsx
此代碼塊導致映射錯誤不是功能
{data && (data.devices || {}).map((obj, i) =>
<div>{obj.name}</div>
)}
我只是不明白,我已經做了data &&
檢查數據是否已定義,否則保留地圖。 還有data.devices || {}
data.devices || {}
檢查devices屬性是否存在。
我console.log(data.devices)
返回未定義,但它應該回console.log(data.devices)
對象嗎? 為什么它仍在中斷?
{}
沒有本機.map
,因此請替換data.devices || {}
data.devices || {}
到data.devices || []
data.devices || []
{(data && data.devices || []).map((obj, i) =>
<div>{obj.name}</div>
)}
在這種情況下, map
不是函數,因為當data.devices
為空時,默認值為空對象,因此map
不是對象的函數。 以這個為例:
// simulate scenarios const data00 = undefined; const data01 = {}; const data02 = { devices: null }; const data03 = { devices: [] }; const data04 = { devices: [{ name: 'device01' }, { name: 'device02' }] } class Main extends React.Component { render() { return ( <div> {this.load(data00)} {this.load(data01)} {this.load(data02)} {this.load(data03)} {this.load(data04)} </div> ); } /** * Loads data and renders the devices if there's any */ load(data) { return (!!data && data.devices || []).map((obj, i) => <div key={i}>{obj.name}</div> ); } } ReactDOM.render(<Main />, document.getElementById('main'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="main"/>
如您所見,將僅呈現data04
的設備。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.