主页 / 问题 / 1437832
Accepted
elarri
Asked:2022-08-09 23:41:07 +0000 UTC2022-08-09 23:41:07 +0000 UTC

对 redux 服务器的两个请求

  • 772

我需要向服务器发出两个连续请求：
getAllPersons，然后是 getPersonsForSelect。

当应用程序加载时，这些请求应该发送到服务器，我使用 useEffect 使它们：

  useEffect(() => {
    dispatch(getAllPersons(mainPersonId))
    dispatch(getPersonsForSelect(processName))
  },[])

  const allbossPerson = useSelector(store => { return store.persons.allbossPerson })
  const personsForSelect = useSelector(store => { return store.persons.personsForSelect })

问题是使用 console.log() 我得到每台服务器的两次点击，即 共 4 个：

import {
    GET_ALL_PERSONS,
    GET_PERSONS_FOR_SELECT
} from "../types/person"

const initialState = {
    allbossPerson: [],
    personsForSelect: []
}

export const persons = (state = initialState, action) => {
    switch (action.type) {
        case GET_ALL_PERSONS:
            console.log('GET_ALL_PERSONS')
            const allPersons = action.allPersons.slice();
            return {
                ...state,
                allbossPerson: allPersons
            }
        case GET_PERSONS_FOR_SELECT:
            console.log('GET_PERSONS_FOR_SELECT')
            const personsForSelect = action.personsForSelect.slice();
            return {
                ...state,
                personsForSelect: personsForSelect
            }
            default:
                return state
    }
}

那些。在控制台中，我有这张图片：

GET_PERSONS_FOR_SELECT
2personReducer.js:14 GET_ALL_PERSONS
personReducer.js:21 GET_PERSONS_FOR_SELECT

我究竟做错了什么？为什么他们被调用了 2 次？

reactjs redux

1 个回答

  1. Best Answer

    组件的双重渲染对于 React 来说是一个标准的事情。这是因为在开发过程中它可以帮助找到一些错误。目前您的代码是这样工作的：

    渲染组件 -> 发出 2 个请求 -> 重新渲染组件 -> 重新发出 2 个请求

    这种行为显然对我们不利，因此有几种方法可以避免它。
    1 方式 - 禁用严格模式。为此，您需要打开 index.js 文件，它看起来像这样（它可能对您有所不同，我从我的项目中获取）：

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/reducers/rootReducer';

const app = <Provider store={store}>
              <BrowserRouter>
                <React.StrictMode>   // строгий режим
                  <App />
                </React.StrictMode>
              </BrowserRouter>
            </Provider>
            
ReactDOM.render(
  app, document.getElementById('root')
);

reportWebVitals();

    您所要做的就是注释掉 <React.StrictMode> 行（或完全删除它们），严格模式将被禁用。也就是说，该文件应如下所示：

    import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/reducers/rootReducer';

const app = <Provider store={store}>
              <BrowserRouter>
                {/* <React.StrictMode> */}
                  <App />
                {/* </React.StrictMode> */}
              </BrowserRouter>
            </Provider>
            
ReactDOM.render(
  app, document.getElementById('root')
);

reportWebVitals();

    另一种选择是构建项目，它不能完全解决问题，但可以确保一切正常。构建是项目的最终组装，也就是说，它将让您有机会以将在 Internet 上发布的形式查看项目。为此，请停止 localhost，然后使用npm run build或yarn build重新开始。当我们构建一个项目时，严格模式会自动关闭，这让我们有机会查看进行了多少渲染

    • 1

相关问题