我正在使用 moviedb 創建一個簡單的電影應用程式。我已經成功檢索到最受歡迎的 20 部電影并將它們置于應用程式狀態：
constructor(props) {
super(props);
this.state = {
movieInfo: [],
}
}
componentDidMount() {
this.getMovies();
}
getMovies = async () => {
await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=94d4ad026c5009bdaf4aecb8989dfa07')
.then(res => this.setState({ movieInfo: res.data.results }))
}
我知道陣列已正確檢索，因為當我查看 Chrome 開發工具中的 React 組件時，我看到了我想要的：
應用狀態螢屏截圖
然后在應用程式的渲染部分，我想將陣列中的第一個元素傳遞給名為 Movie 的組件，然后該組件將顯示有關電影的一些資訊：
return (
<div>
<Movie movie={this.state.movieInfo[0]} />
</div>
);
}
我知道電影組件正在正確獲取此資訊，因為我在電影組件道具中看到了代表第一部電影的物件：
電影組件道具
我的電影功能如下所示：
return (
<div>
<h1>{props.movie.original_title}</h1>
<p>{props.movie.overview}</p>
</div>
)
}
我第一次編譯它時，它起作用了，我看到了我想要的資訊：
帶有電影組件的渲染應用程式
但令人難以置信的是，當我重繪 頁面時，我看到了錯誤訊息
TypeError: Cannot read properties of undefined (reading 'original_title')
應用程式怎么可能正確地將資訊傳遞給電影并正確顯示一次，但是一旦我以某種方式重繪 頁面，它就未定義？
預先感謝您的幫助，JD
uj5u.com熱心網友回復：
當頁面重新加載時，init 狀態是一個空陣列。您必須檢查陣列是否有要呈現的專案。
return (
<div>
{this.state.movieInfo && this.state.movieInfo.length>0 && (<Movie
movie={this.state.movieInfo[0]} />)}
</div>
);
uj5u.com熱心網友回復：
您可能還需要將 componentDidUpdate() 與 componentDidMount() 一起使用：
componentDidMount() {
this.getMovies();
}
componentDidUpdate() {
this.getMovies();
}
uj5u.com熱心網友回復：
我假設您在開發和更改代碼時不會收到錯誤訊息。當您保存代碼時，熱多載只會更改已更改的部分。
這意味著，如果您的應用程式加載資料并填充this.state.movieInfo來自 BE 的陣列，并且您保存了代碼，則它會熱重新加載并獲得新資料。所以，this.state.movieInfo[0]總是充滿資料。
當您重繪 應用程式時，它只是在您將它放在constructor.
解決方案是在渲染Movie組件之前始終檢查陣列中是否存在第一個元素：
return (
<div>
{this.state.movieInfo[0] ? <Movie movie={this.state.movieInfo[0]} /> : null}
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/363356.html
標籤：javascript 反应