如何映射不同對象的數組並返回JSX而不會出現錯誤

Question

如果您在具有不同數據的對象數組上進行映射，React將引發錯誤。 我需要弄清楚如何映射每個對象並返回jsx，即使這些對象具有不同的結構。

查看此代碼作為示例。 它將引發錯誤。

 const data = [{ a: 'a-data', b: 'b-data' }, { a: 'a-data' }]; const elements = data.map(d => { return <div key={d.val}> <p>{da}</p><p>{db}</div>; }); return <div>{elements}</div>; 

我應該能夠看到第一個對象的兩個p標簽，而第二個對象只有一個p標簽。

Answer 1

您可以對默認參數使用解構。

例如：

 const data = [{ a: 'a-data', b: 'b-data' }, { a: 'a-data' }]; const elements = data.map(({a, b} = {}, index) => { return ( <div key={index}> <p>{a}</p> <p>{b}</p> </div> ); }); ReactDOM.render(<div>{elements}</div>, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

好吧，因此它實際上不會引發錯誤。 我把“無法讀取屬性類型為“ someName”的undefined”錯誤與我在這里描述的混淆了。

 class MyApp extends React.Component{ render(){ const data = [{ a: 'a-dataOne', b: 'b-dataOne', c:"hljkdflj" }, { a: 'a-data' }]; const elements = data.map(d => { return <div key={d.val}> <p>{da}</p><p>{db}</p><p>{dc}</p></div>; }); return <div>{elements}</div>; } } ReactDOM.render( <MyApp></MyApp>, document.getElementById('app') );