3 回答

TA貢獻1856條經驗 獲得超5個贊
嘗試這樣的事情:
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
{data.items.map(({id, url, title}) => (
<MenuItem key={id}>
<Link to={url}> {title} </Link>
</MenuItem>
)}
</Menu>
或者,如果您想使用該函數,請調用它:
const Generate = items =>
items.map(({id, url, title}) => (
<MenuItem key={id}>
<Link to={url}> {title} </Link>
</MenuItem>
)
;
所以: {Generate(data.items)} 傳遞參數是個好主意,因為它使 Generate 成為一個純函數!

TA貢獻1809條經驗 獲得超8個贊
.map()當您映射對象列表時,您可能想使用函數,在您的情況下,為什么不嘗試這樣的事情呢?
Const Generate = () => {
{data.items.map((e,i) => (
<MenuItem key={i}>
<Link to={e.url}> {e.title} </Link>
</MenuItem>
))}
}
這應該對你有用。

TA貢獻1998條經驗 獲得超6個贊
看起來你有正確的想法。我首先想到Generate的是一個函數,但你從不調用它。相反,您有{Generate}which 直接評估函數對象,而不是它返回的內容。相反,您可能應該擁有{Generate()}.
我建議您通過添加更多console.log()調用來更多地調試您的代碼。閱讀本文以獲取有關調試代碼的更多提示。
我看到的另一個問題是您的Generate()函數的語法:
Const Generate = () => {
{data.items.map(({id, url, title}) => (
<MenuItem key={id}>
<Link to={url}> {title} </Link>
</MenuItem>
))
console.log('lol')}
}
特別是,我認為你有一些額外的牙套。正確的語法應該是這樣的:
const Generate = () => {
console.log('lol');
return data.items.map(({id, url, title}) => (
<MenuItem key={id}>
<Link to={url}> {title} </Link>
</MenuItem>
));
}
只有一組花括號包圍了胖箭頭函數的主體。這里的語法是(<params>) => {<statements>}where<params>是參數<statements>列表,是要執行的語句列表。
在胖箭頭函數中的語句周圍使用花括號時,必須包含return語句才能返回結果。由于該console.log()聲明,這是必要的。如果只有一個語句,則可以刪除花括號,并且單個語句不需要返回:
const Generate = () =>
data.items.map(({id, url, title}) => (
<MenuItem key={id}>
<Link to={url}> {title} </Link>
</MenuItem>
));
添加回答
舉報