Question

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

我的实现方式如下：

app.js的状态为消息
在return语句中，我添加了message && <div>{message}</div>
当用户单击“提交”时，将调用setMessage（通过props传递），并且消息应该更改
重定向到主页，其中有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.

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

app.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>
);

register.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='/' />}
)

Home.jsx

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

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

0 个答案: