分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了当在 redux 中调度 store 变量时，React 组件不会重新渲染，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决当在 redux 中调度 store 变量时，React 组件不会重新渲染？

开发过程中遇到当在 redux 中调度 store 变量时，React 组件不会重新渲染的问题如何解决？下面主要结合日常开发的经验，给出你关于当在 redux 中调度 store 变量时，React 组件不会重新渲染的解决方法建议，希望对你解决当在 redux 中调度 store 变量时，React 组件不会重新渲染有所启发或帮助；

import React,{ useEffect,useState } from 'react';
import { usedispatch,useSELEctor } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { logedInAction } from '../../redux/userDetails/userDetailsActions';

import Loading from '../Loading/Loading';
import ChatList from './ChatList/ChatList';

const MainWindow = () => {
    const { isLoged } = useSELEctor( state => state.userDetails );
    const dispatch = usedispatch();
    const history = useHistory();

    const [ loading,setLoading ] = useState@R_801_6334@;

    useEffect( () => { 
        const dataFetcher = async () => {
            try {
                const res = await fetch( "http://localhost:4000/",{ credentials: 'include' });
                // doing some code and dispatching isLoged variable to true
                setLoading(false);
            } catch(E) { console.log(E); }
        }
        dataFetcher();
    },[ dispatch,history ] );

    return(
        <>
            {
                loading ? <Loading  /> : 
                isLoged ? <ChatList /> : <div> error</div>
            }
        </>
    );
}

export default MainWindow;

当这个程序启动时，变量 lodaing 为真；所以组件被渲染。运行 datafecter 后，变量 lodaing 变为 false，isLoged 变为 true。@H_197_13@

最初 isLoged 是假的；我从 redux 商店获得了它。当我在两者之间将其调度为 true 时，它会将其值更改为 true （我看到 react dev 工具中的值更改）。但它并没有重新渲染它的价值。@H_197_13@

即，如果 lodaing 为假且 isLoged 为真，我应该获取组件。但不幸的是，我收到了错误组件。这意味着 isLoged 的 值未呈现。@H_197_13@

如何解决这个 Redux 渲染问题？@H_197_13@

解决方法

这个问题可能是由于 React 完全更新本地状态所需要的延迟造成的，因此您需要使用 useEffect 仅在状态 loading 发生变化时分派您的操作。所以：@H_197_13@

import React,{ useEffect,useState } from 'react';
import { useDispatch,useSELEctor } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { logedInAction } from '../../redux/userDetails/userDetailsActions';

import Loading from '../Loading/Loading';
import ChatList from './ChatList/ChatList';

const MainWindow = () => {
    const { isLoged } = useSELEctor( state => state.userDetails );
    const dispatch = useDispatch();
    const history = useHistory();

    const [ loading,setLoading ] = useState@R_801_6334@;

    useEffect( () => { 
        const dataFetcher = async () => {
            try {
                const res = await fetch( "http://localhost:4000/",{ credentials: 'include' });
                setLoading(false);
            } catch(E) { console.log(E); }
        }
        dataFetcher();
    },[ dispatch,history ] );

    useEffect( () => { 
       // this "if" guarantee that the local state `loading` and the store state `isLoged` will be false at this point
       if(!loading && !isLoged) {
         // doing some code and dispatching isLoged variable to true
       }
       
    },[ loading ] );

    return(
        <>
            {
                loading ? <Loading  /> : 
                isLoged ? <ChatList /> : <div> error</div>
            }
        </>
    );
}

export default MainWindow;