路由更改時反應路由器不會卸載以前的內容

我正在嘗試構建一個反應應用程式，它從新聞 api 獲取新聞并根據類別顯示它。它使用無限滾動并一次顯示 6 個新聞專案。

export default class App extends Component {
  render() {
    return (<>
      <BrowserRouter>

        <Navbar />
        <Routes>

          <Route exact path="/general" key="general" element={<News category={'general'} />} />
          <Route exact path="/sports" key="sports" element={<News category={'sports'} />} />
          <Route exact path="/entertainment" key="entertainment" element={<News category={'entertainment'} />} />
          <Route exact path="/health" key="health" element={<News category={'health'} />} />
          <Route exact path="/science" key="science" element={<News category={'science'} />} />
          <Route exact path="/" key="everything" element={<News/>} />

        </Routes>

      </BrowserRouter>
    </>
    )
  }
}

這是新聞組件的代碼

export default class News extends Component {

  static defaultProps = {
    pageLimit: 6,
    category:'',
    country: 'in'
  }

  static propTypes = {
    pageLimit: PropTypes.number.isRequired,
    country: PropTypes.string.isRequired
  }

  constructor() {
    super();
    this.state = {
      articles: [],
      loading: true,
      page: 1,
      totalResults: 1,
      pageSize: 1
    }
  }

  async componentDidMount() {
    let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&apiKey=445f58e1d17c4229b23e3965d19197c7&category=${this.props.category}&page=1&pagesize=${this.props.pageLimit}`;
    let res = await fetch(url);
    let data = await res.json();
    this.setState({
      loading: false,
      totalResults: data.totalResults,
      articles: data.articles,
      pageSize: Math.ceil(data.totalResults / this.props.pageLimit)
    });
  }

  fetchData = async () => {
    let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&apiKey=445f58e1d17c4229b23e3965d19197c7&category=${this.props.category}&page=${this.state.page   1}&pagesize=${this.props.pageLimit}`;
    
    this.setState({
      loading: true,
      page: this.state.page   1,
    })

    let res = await fetch(url);
    let data = await res.json();
    this.setState({
      loading: false,
      articles: this.state.articles.concat(data.articles),
    });
  }

  render() {
    return (<>

      <InfiniteScroll
        dataLength={this.state.articles.length}
        next={this.fetchData}
        hasMore={this.state.articles.length !== this.state.totalResults}
        loader={<Spinner />}
      >
        <div className='container'>
          <div className='row'>
            {
              this.state.articles.map((elem) => {
                return <div className='col-md-4' key={elem.url}>
                  <Newscomp title={elem.title ? elem.title.slice(0, 30) : ""} url={elem.url} imgUrl={elem.urlToImage} description={elem.content ? elem.content.slice(0, 40) : ""} />
                </div>
              })
            }
          </div>
        </div>
      </InfiniteScroll>
    </>
    )
  }
}

當我嘗試將類別從一般更改為體育時，之前的 6 個一般新聞專案仍然存在，但向下滾動時，我會從體育類別中獲取新聞。

我希望它在我切換類別時完全洗掉以前的內容并顯示新獲取的內容。我怎樣才能做到這一點？

uj5u.com熱心網友回復：

當 2 個或更多路由呈現相同的路由組件時，這是一種優化。在這種情況下，News組件。組件將News保持安裝狀態，只有categoryprop 發生變化，因此News組件可以回應該更改。你有幾個選擇：

1. 將 移動key到正確的組件。Route它與組件無關。將key道具移動到路由組件以“強制重新安裝”它。

   <BrowserRouter>
     <Navbar />
     <Routes>
       <Route path="/general" element={<News key="general" category={'general'} />} />
       <Route path="/sports" element={<News key="sports" category={'sports'} />} />
       <Route
         path="/entertainment"
         element={<News key="entertainment" category={'entertainment'} />}
       />
       <Route path="/health" element={<News key="health" category={'health'} />} />
       <Route path="/science" element={<News key="science" category={'science'} />} />
       <Route path="/" element={<News key="everything" />} />
     </Routes>
   </BrowserRouter>
   

2. 實作componentDidUpdate生命周期方法來處理對categoryprop 更新的回應。

   export default class News extends Component {
     ...
   
     fetchInitialData = async () => {
       const { category, country, pageLimit } = this.props;
       this.setState({ loading: true }); // set loading state
   
       const url = `https://newsapi.org/v2/top-headlines?country=${country}&apiKey=445f58e1d17c4229b23e3965d19197c7&category=${category}&page=1&pagesize=${pageLimit}`;
   
       try {
         const res = await fetch(url);
         const data = await res.json();
   
         this.setState({
           totalResults: data.totalResults,
           articles: data.articles,
           pageSize: Math.ceil(data.totalResults / pageLimit)
         });
       } catch(error) {
         // handle any rejected Promises or thrown errors
       } finally {
         this.setState({ loading: false }); // clear loading state
       }
     }
   
     componentDidMount() {
       fetchInitialData();
     }
   
     componentDidUpdate(prevProps) {
       if (prevProps.category !== this.props.category) {
         fetchInitialData();
       }
     }
   
     ...
   }
   

標籤：反应 反应路由器

上一篇：如何從一組資料中顯示與北極星反應的產品串列？

下一篇：為什么我有錯誤“[Header]不是<Route>組件。”？[復制]