路由到另一个页面时不会触发提取

Question

无论我做什么，我似乎都无法在运行之后再次获取运行。它运行一次并根据接收到的数据加载页面，但是当我通过 link 导航到另一个 URL 时（无需重新加载整个页面）它不会改变任何东西。连国家都不行。当 fetch 也抛出错误时，它没有任何不同。

感谢帮助让它正常工作。如果 localStorage 上不可用，CompanyContextProvider 会提供一些获取的数据。我正在使用 react-router-dom v6

我的 app.js 看起来像这样，

<CompanyContextProvider>
  <BrowserRouter basename={'unicorn'}>
    <Routes>
      <Route path={'/'} element={<Home companies={this.state.companies} />} />
      <Route path="/:page" element={<Page />} />

Page.js 看起来像这样，

import React, {Component} from "react";
import Header from "../../common/header/Header";
import {withRouter} from "../../../helpers/Helpers";
import NotFound from "../../common/NotFound";

class Page extends Component{
    state = {
        isLoading:false,
        page:{
            pageContent:{},
            vacancies:[]
        },
        error:0,
        path:''
    }

    componentDidMount() {
        this.setState({isLoading:true})
        const base_url = process.env.REACT_APP_API_BASE
        const location = this.props.params.page;

        this.setState({
            path:this.props.location
        })

        fetch(base_url + 'api/page/'+location)
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        page:result,
                        isLoading:false,
                        error:0
                    })
                }, (error) => {
                    //console.log(error)
                    this.setState({
                        isLoading:false,
                        error:404,
                        page:{
                            pageContent:{},
                            vacancies:[]
                        },
                    })
                }
            )
    }
    render() {
        function createMarkup(content) {
            return {__html: content};
        }
        return (
            <>
                <Header />
                {
                    this.state.error > 0
                    ? <NotFound />
                    : !this.state.isLoading
                      ?   <div key={'content'} className={'container mx-auto mt-8'}>
                            <h1 className={'text-4xl my-4'}>{this.state.page.pageContent.title}</h1>
                            <p dangerouslySetInnerHTML={createMarkup(this.state.page.pageContent.content)} />
                        </div>
                     : <div>Loading...</div>

                }
            </>
        )
    }
}

export default withRouter(Page)

withRouter() 看起来像这样，

export function withRouter( Child ) {
    return ( props ) => {
        const location = useLocation();
        const params = useParams();
        const history = useNavigate();
        return <Child { ...props } params={params} location={ location } history={history} />;
    }
}

Answer 1

componentDidMount 仅在组件挂载时调用一次。如果您的逻辑需要稍后在某些条件发生变化时再次运行，那么您还需要实施 componentDidUpdate 生命周期方法。

将公共逻辑抽象为实用函数，可以从任一生命周期方法调用。

const base_url = process.env.REACT_APP_API_BASE;

...

fetchPage = () => {
  const location = this.props.params.page;

  this.setState({
    isLoading: true
    path: this.props.location
  });

  fetch(base_url + 'api/page/' + location)
    .then(res => res.json())
    .then((result) => {
      this.setState({
        page: result,
        error: 0
      })
    })
    .catch((error) => {
      //console.log(error)
      this.setState({
        error: 404,
        page: {
          pageContent: {},
          vacancies: []
        },
      });
    })
    .finally(() => {
      this.setState({
        isLoading: false,
      });
    });
}

componentDidMount() {
  this.fetchPage();
}

componentDidUpdate(prevProps) {
  if (prevProps.params.page !== this.props.params.page) {
    this.fetchPage();
  }
}

路由到另一个页面时不会触发提取

Fetch doesn't trigger when routed to another page

javascript

reactjs

fetch

react-router-dom

react-context