使用 mobx 和 React 会出现错误：Too much re-renders。 React限制渲染次数以防止无限循环

Question

在我看来，我想使用 mobx 保存一个名为 mask 的状态，当我使用 axios 时，此状态将为 true，当我完成调用时，此状态将为 false，下面是我的代码

store.tsx

import { makeAutoObservable, runInAction } from 'mobx';
import axios from 'axios';

class Store {

isHeaderShow = false;

isTabBarShow = false;

isShowingMovies = [];

isShowingMovieIds = [];

willShowingMovies = [];

willShowingMovieIds = [];

isLoading = false;


constructor() {
    makeAutoObservable(this);
}


getShowingMovies = async () => {
    if (this.isShowingMovies.length === 0) {
        this.isLoading = true;
        let res = await axios.get(`http://localhost:3000/movie/ajax/movieOnInfoList`).then((res) => {
            return res.data;
            this.isLoading = false;
        })
        runInAction(() => {
            this.isShowingMovies = res.movieList;
            this.isShowingMovieIds = res.movieIds;
           
        })
    }
}
}

    const store = new Store();
    
    export default store

mask.tsx

import React, { useState, FC } from 'react'
import { Mask } from 'antd-mobile'
import store from '../../mobx/store'
import { observer } from 'mobx-react';

const SimpleMask: FC = () => {
    const [visible, setVisible] = useState(false)
    setVisible(store.isLoading);
    return (
        <>
            <Mask visible={visible} />
        </>
    )
}

export default observer(SimpleMask)

App.tsx

import React from 'react';
import './App.css';
import Header from './component/header'
import Footer from './component/footer'
import Mask from './component/mark'

function App() {
  return (
    <div className="container">
      <div className='header'>
        <Header />
      </div>
      <div className='main'>This is main</div>
      <div className='footer'>
        <Footer />
      </div>
      <Mask/>
    </div>
  );
}

export default App;

package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.13",
    "antd-mobile": "^5.4.0",
    "axios": "^0.26.0",
    "mobx": "^6.4.2",
    "mobx-react": "^7.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
  },

错误如下 错误信息

你们能给我一些建议吗？我第一次使用react和mobx并且想要改进。 非常感谢你！

Answer 1

您直接在 Mask 组件中调用 setVisible，这会导致重新渲染，从而导致再次调用 setVisible，并且无限循环继续。

您可以在 useEffect 的帮助下，仅在 store.isLoading 实际发生变化时更新状态：

const SimpleMask: FC = () => {
    const [visible, setVisible] = useState(false)
    
    useEffect(() => {
      setVisible(store.isLoading)
    }, [store.isLoading])

    return (
        <Mask visible={visible} />
    )
}

或者您可以跳过 useState完全并立即使用您的商店：

const SimpleMask: FC = () => {
    return (
        <Mask visible={store.isLoading} />
    )
}