状态管理 - 渲染不同组件时无法更新组件（`Provider`）

Question

我正在尝试使用jotai 来更新全局指标。指标将激活LinearProgress(true or false)

在 atom.js 中，我创建了一个基本原子作为指标：

export const isDownloadAtom = atom(false)

将提供程序添加到应用程序：

import { Provider } from "jotai";
ReactDOM.render(
<React.StrictMode>
    <Provider>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
</React.StrictMode>,
document.getElementById("root")
);

并最终更新指标：

import { Get } from 'react-axios';
import { useAtom } from "jotai";
import { isDownloadAtom } from "../store/atom";
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';


export default function Quotes() {

const [, set] = useAtom(isDownloadAtom)
const url = '/random'

return (
    <div style={{ padding: 20 }}>
        <Get url={url}>
            {(error, response, isLoading, makeRequest, axios) => {
                if (error) {
                    return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
                }
                else if (isLoading) {
                    set(true)
                    return (<div>Loading...</div>)
                }
                else if (response !== null) {
                    set(false)
                    return (
                        <div>

还有 LinearProgress 组件：

  import { useAtom } from "jotai";
  import { isDownloadAtom } from "../../store/atom";
  export default function AppBar() {

  const [isDownload] = useAtom(isDownloadAtom)

  return (
    <div >
        <MuiAppBar position="static">
            <Toolbar variant="dense" color="inherit">
                <IconButton
                    edge="start"
                    color="inherit"
                    aria-label="menu"
                    to="/"
                    component={Link}
                    size="large">
                    <IconHome />
                    <Typography variant="h6">Online Information</Typography>
                </IconButton>
            </Toolbar>
            {isDownload ? <LinearProgress /> : ''}
        </MuiAppBar>
    </div>

一般而言，代码可以正常工作，但是当我刷新页面 (F5) 时，我收到以下警告消息

警告：在渲染组件时无法更新组件 (AppBar) 不同的组件（Request）。定位错误的 setState() 调用 在`请求中

我想了解是什么问题以及如何解决。

谢谢

Answer 1

AppBar 和 Quotes 组件的关系是什么？他们是兄弟姐妹还是有条件渲染的？没有看到整个事情就无法真正说出，但我认为渲染块内的setState() 是罪魁祸首。作为一般规则，React 组件不应在渲染期间对其他组件造成副作用。检查直接在<Get> 组件上传递回调是否会改变任何内容。

<Get url={url} onSuccess={(res) => set(false)} onLoading={() => set(true)}>
    {(error, response, isLoading, makeRequest, axios) => {
        if (error) {
            return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
        } else if (isLoading) {
            //set(true) - this is probably the issue
            return (<div>Loading...</div>)
        } else if (response !== null) {
            //set(false)
            return (<div>...

如果您能提供一个可重现的最小示例，那么说明发生了什么会容易得多。