reactjs - 出现以下错误：无法对未安装的组件执行 React 状态更新

Question

我正在创建一个注册页面，当用户注册时，它应该转到主页，然后显示一条消息。

我实现它的方式如下：

• app.js 有一个名为 message 的状态
• 在返回语句中，我添加了message && <div>{message}</div>
• 当用户单击提交时，调用 setMessage （通过道具传递）并且消息应该更改
• 重定向到主页，该主页具有useEffect(() => {}, [props.location.pathname.split('/')[1]])

当我运行应用程序时，我收到以下错误：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我做错了什么，我该如何解决？这是完整的代码：

应用程序.js

const [message, setMessage] = useState({});

return (
    <div className='App'>
        {message && message.text && (
            <div>{message.text}</div>
        )}
        <Switch>
            <Route
                path='register'
                component={props => (
                    <Register setMessage={setMessage}/>
                )}
            />
            <Route
                path='/'
                component={({ location }) => (
                    <MainContent
                        location={location}
                    />
                )}
            />
        </Switch>
    </div>
);

注册.js

const [shouldRedirect, setShouldRedirect] = useState(false);
const submitCallback = async credidentials => {
    try {
        // Post Data...
        const message = { text: 'You Registered' };
        setMessage(message);
        setShouldRedirect(true);
    } catch (error) {
        console.log(error);
    }
};

return (
    {shouldRedirect && <Redirect to='/' />}
)

主页.jsx

useEffect(() => {
    //FetchData
}, [urlPath]);

标签： reactjs