React 页面不加载新内容

Question

我正在尝试以声明方式重定向页面。

这是我的 Header.js:

const Header = () => {  
    const [data, setData] = useState({ objects: [] });
    useEffect(async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories"
        );
        setData(result.data);
    }, []);

    return (
        <div>
            {courses.map( objects => (
                <Link to={`/cats/${objects.id}`}>{objects.title}</Link>
            ))}
        </div>
    );
};

export default Header;

这是我的App.js

class App extends Component {
    render(){
        return (
            <Router>
                <Redirect exact from="/" to="/index" />
                <Route path = "/" component = {App}>
                    <Header/>
                    <Route path="/cats/:objectId" component={CoursePage} />
                </Route>
            </Router>
        );
    }
}
export default App;

这里是 CoursePage.js:

const CoursesPage = (props) => {

    let { objectId } = useParams();


    const [data, setData] = useState({ courses: [] });

    useEffect(() => {
        (async () => {
            const result = await axios.get(
                "http://example.com/api/v1/cats/"+objectId
            ).catch(err => {
                console.error(err);
            });
            setData(result.data);
        })();
    }, []);


    return (
        <Fragment>
            {courses.title}
        </Fragment>
    );
};

export default CoursesPage;

在页眉上，我单击 links。它成功重定向到课程页面。但是，当我再次单击另一个课程 link 时，它不会重新加载组件，也不会加载新数据。 URL 改变了，但页面没有。

如何强制页面重新加载组件？

Answer 1

您应该将 CoursePage 中 useEffect 的依赖数组更改为依赖 objectId，只要对象 ID 发生变化，它就会重新运行效果。

const CoursesPage = (props) => {

let { objectId } = useParams();


const [data, setData] = useState({ courses: [] });

useEffect(() => {
    (async () => {
        setData({ courses: [] });    // add this line
        const result = await axios.get(
            "http://example.com/api/v1/cats/"+objectId
        ).catch(err => {
            console.error(err);
        });
        setData(result.data);
    })();
}, [objectId]);  // Update dependency array here


return (
    <Fragment>
        {courses.title}
    </Fragment>
);
}
 
export default CoursesPage;

一旦对象 ID 更改，这将重置以前的数据以加载新数据。

如果您想在 url 中的参数更改时完全重新挂载组件，那么您可以向组件根元素添加一个 id。

return (
<Fragment key={objectId}>
    {courses.title}
</Fragment>
);

React 页面不加载新内容

React page doesn't load the new content

javascript

state

reactjs

react-router

use-state