Question

我正在尝试加载一个充满按钮的页面。当您单击按钮时，您将转到与特定国家/地区关联的页面。按下浏览器上的后退箭头应该带您回到按钮页面，但是在我刷新之前该页面是空白的。我假设当我返回页面时useEffect不执行，但是我不确定。这是我的按钮页面：

import React from 'react';
import { useState, useEffect } from 'react';
import Country from './Country.js';
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';


export default function CIALanding(props) {


    const [countriesList, setCountriesList] = useState([])

    async function getCountries() {
        const response = await fetch('http://127.0.0.1:5000/countries');
        const data = await response.json();
        setCountriesList(data['country_list'].map((country) => {return (
            <Link to={{pathname:`/country/${country[0]}`
            }}>
            <Button>{country[0]}</Button>
            </Link>
        )}))
    }

    useEffect(() => {
        getCountries()
    },[])
        return (
            <div>
            {countriesList}
            </div>
        )

}

这是按钮导航到的页面

import React from 'react';
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button'
import {useState, useEffect } from 'react';

export default function Country(props) {

    const [details, setDetails] = useState({})
    const [pdf, setPdf] = useState('')
    const { country }= props.match.params

    async function getDetails() {
        const configs = {
            methods: 'POST',
            mode: 'cors',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                'country': country
            })
        };
        const response = await fetch('http://127.0.0.1:5000/details', configs)
        const data = await response.json();
        setDetails(data['details'])
        setPdf(data.pdf)
    }

    useEffect(() => {
        getDetails()
    },[])

    return (
        <div>
            <div>{details}</div>
            <Button>Hello</Button>
        </div>
    )

}

这是我的路线

export default function App() {

const [cname, setCName] = useState('')
const [pdf, setPdf] = useState('')
const [details, setDetails] = useState('')

  return (
    <div className="App">
      <BrowserRouter>
        {/* <Route exact path="/" component = { Home }/> */}
        <Route path="/cia" component = {(props) => <CIALanding {...props} setCName={setCName} setPdf={setPdf} setDetails={setDetails}/>}/>
        <Route path="/country/:country" component={(props) => <Country {...props} setCName={setCName} details={details} cname={cname}/>}/>
        <Route path="/countrypage" component={CountryPage}/>          
      </BrowserRouter>
    </div>
  );
}

感谢您的帮助！

Answer 1

您需要更新useEffect

import React from 'react';
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button'
import {useState, useEffect } from 'react';

export default function Country(props) {

    const [details, setDetails] = useState({})
    const [pdf, setPdf] = useState('')
    const { country }= props.match.params

    async function getDetails() {
        const configs = {
            methods: 'POST',
            mode: 'cors',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                'country': country
            })
        };
        const response = await fetch('http://127.0.0.1:5000/details', configs)
        const data = await response.json();
        setDetails(data['details'])
        setPdf(data.pdf)
    }

    useEffect(() => {
        getDetails()
    },[props.match.params.country])

    return (
        <div>
            <div>{details}</div>
            <Button>Hello</Button>
        </div>
    )

}

对于调试，如果可行，可以尝试一下。请勿在最终代码中使用此代码，因为每次更新道具时都会调用此代码。

useEffect(() => {
    getDetails()
})

使用后退按钮导航时useEffect无法执行

1 个答案: