React 組件僅檢索一次道具，刷新時未定義

Question

我正在用moviedb 創建一個簡單的電影應用程序。 我已成功檢索到最受歡迎的 20 部電影並將它們放入應用 state 中：

  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 組件時，我看到了我想要的：

App state 的屏幕截圖

然后在應用程序的渲染部分，我想將數組中的第一個元素傳遞給一個名為 Movie 的組件，然后該組件將顯示有關電影的一些信息：

    return (
      <div>
        <Movie movie={this.state.movieInfo[0]} />
      </div>
    );
  }

我知道電影組件正確獲取此信息，因為我看到 object 代表電影組件道具中的第一部電影：

電影組件道具

我的電影 function 看起來像這樣：

    return (
        <div>
            <h1>{props.movie.original_title}</h1>
            <p>{props.movie.overview}</p>
        </div>
    )
}

我第一次編譯它就可以了，我看到了我想要的信息：

帶有電影組件的渲染應用程序

但令人難以置信的是，當我刷新頁面時，我看到了錯誤消息

TypeError: Cannot read properties of undefined (reading 'original_title')

應用程序怎么可能正確地將信息傳遞給電影並正確顯示一次，但是一旦我以某種方式刷新頁面，它就不確定了？

提前感謝您的幫助，JD

Answer 1

您可能還需要將 componentDidUpdate() 與 componentDidMount() 一起使用：

componentDidMount() {
    this.getMovies();
}
componentDidUpdate() {
    this.getMovies();
}

Answer 2

我假設您在開發和更改代碼時不會出錯。 當您保存代碼時，熱重載只會更改已更改的部分。

這意味着如果您的應用程序加載數據並使用來自 BE 的數組填充this.state.movieInfo ，並且您保存代碼，它會熱重新加載並獲得新數據。 所以， this.state.movieInfo[0]總是填充數據。

當你刷新你的應用程序時，它只是重置為一個空數組，因為你把它放在constructor中。

解決方案是在渲染Movie組件之前始終檢查數組中是否存在第一個元素：

return (
  <div>
    {this.state.movieInfo[0] ? <Movie movie={this.state.movieInfo[0]} /> : null}
  </div>
);

Answer 3

當頁面重新加載時，init state 是一個空數組。 您必須檢查數組是否有要渲染的項目。

return (
  <div>
    {this.state.movieInfo && this.state.movieInfo.length>0 && (<Movie 
    movie={this.state.movieInfo[0]} />)}
    
  </div>
);