javascript - React 路由到新组件，尝试 setState，然后得到“无法对未安装的组件执行 React 状态更新”。

Question

我正在尝试从我的主页路由到一个组件。在这个新组件被路由到之后，我使用 useEffect 进行了一些 fetch 调用，然后尝试根据这些 fetch 调用的结果设置组件的状态。不幸的是，我遇到了“无法对未安装的组件执行 React 状态更新”。这样做时出错。

这是我的代码：App.tsx

import './App.css';

import React from 'react';
import { BrowserRouter as Router, Route, Link, } from "react-router-dom";

import { Profile } from './Profile/Profile';
import { Header } from './common';
import { PostList } from './PostList';
import { Post } from './Post';

export const App = (): JSX.Element => {

  return (
    <section className="App">
      <Router>
        <nav>
          <Link to="/" className="navbar-item" id="logo">AGORA</Link>
          <Link to="/profile" className="navbar-item">Profile</Link>
          <Link to="/post/1">Post 1</Link>
          <Route exact path="/" component={ PostList } />

          <Route exact path="/profile" component={ Profile } />
          <Route exact path="/post/:id" component={ Post } />
        </nav>
      </Router>
    </section>
  );
}

export default App;

然后这是引发错误的 Post.tsx：

import './Post.css';
import { CommentComposer } from '../common';

import React, { useEffect, useState } from 'react';

interface State {
    postId: number;
    post: {
        id: number;
        title: string;
        stake: number;
        upvotes: number;
        comments: number;
        post: string;
    };
};

export const Post = (props): JSX.Element => {
    const [state, setState] = useState<State>({
        postId: props.match.params.id,
        posts: []
    });

    useEffect(() => {
        fetch(`${process.env.REACT_APP_BACKEND_URL}/posts/${state.postId}`)
            .then((response) => response.json())
            .then(console.log)
            .then((post) => setState({ ...state, post: post }))
            .then(console.log(state.post.title))
            .catch(window.alert);
    }, []);


    return (
        <div>
            <CommentComposer />
        </div>
    );


}

我想办法解决这个问题。我刚刚开始学习 React，并在这个项目中彻底放弃了自己。有什么建议么？

标签： javascriptreactjstypescriptreact-routerreact-hooks