現在一切都是靜態資料。
我有一個父狀態：一個包含 4 個物件的陣列，如下所示：
function App(){
const [searchResults,setSearchResults] =
useState([
{
name: 'name1',
artist: 'artist1',
album: 'album1',
id: 1
},
{
name: 'name2',
artist: 'artist2',
album: 'album2',
id: 2
},
{
name: 'name3',
artist: 'artist3',
album: 'album3',
id: 3
},
{
name: 'name4',
artist: 'artist4',
album: 'album4',
id: 4
}
]);
我將此狀態傳遞給回傳的孩子，它按預期作業：
return (
<SearchResults searchResults = {searchResults} />
)
并從我傳遞給：
import React,{useEffect,useState} from "react";
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';
export default function SearchResults({searchResults}) {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks = {searchResults} />
</div>
)
}
現在是事情讓我感到困惑的地方。
我嘗試像這樣將陣列中的資料映射到該組件的子組件（這是整個組件）：
import React,{useEffect,useState} from "react";
import './TrackList.css';
import Track from '../Track/Track'
export default function TrackList(props) {
return(
<div className="TrackList">
{
props.tracks.map( track => {
<Track track = {track} key = {track.id} />
})
}
</div>
)
}
我在本地服務器顯示白屏時收到此錯誤 [1]：https ://i.stack.imgur.com/5niRQ.png
- 我嘗試在映射之前解構并將道具值分配給變數，但沒有奏效。
- 同樣，當我洗掉 .map 時，我可以使用反應開發工具看到其中有一個帶有預期資料的道具。
uj5u.com熱心網友回復：
問題不在您提到的組件中，而在組件中，您在沒有道具的情況下Playlist加載了TrackList組件。tracks如果對您的情況有幫助，請接受答案。謝謝！
uj5u.com熱心網友回復：
您需要將道具傳遞給 SearchResults 組件而不是引數
像這樣
import React,{useEffect,useState} from "react";
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';
export default function SearchResults(props) {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks = {props.searchResults} />
</div>
)
}
uj5u.com熱心網友回復：
您始終可以使用控制臺查看傳輸到道具的內容。
console.log(props);
您需要console.log(props);在 return 陳述句之前添加，就像這樣
import React,{useEffect,useState} from "react";
import './TrackList.css';
import Track from '../Track/Track'
export default function TrackList(props) {
console.log(props);
return(
<div className="TrackList">
</div>
)
}
uj5u.com熱心網友回復：
我已在沙箱中復制了您的代碼，但已排除該Tracks組件。我沒有看到任何錯誤，請參考它，如果您需要更多幫助，請告訴我。此外，在使用map或任何其他功能時，您需要使用return關鍵字或避免使用花括號{}。
例如，內部TrackList函式：
{
props.tracks.map( track => { //here avoid this or use 'return' keyword inside
<Track track = {track} key = {track.id} />
})
}
//Like this:
{
props.tracks.map( track =>
<Track track = {track} key = {track.id} />
)
}
//or
{
props.tracks.map( track =>
{ return <Track track = {track} key = {track.id} /> }
)
}
沙盒鏈接
如果有幫助，請接受答案或點贊，謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/508302.html
標籤：javascript 反应 反应钩子
上一篇：ReactNativeauth.tenandId錯誤的Firebase身份驗證
下一篇：替換字串模式但保留其中的一部分