Reactjs 反应状态覆盖当前减速器

我有一个名为

restaurant

的组件，我试图在其中调用操作

FETCH_ALL

。我正在成功地使用MongoDB提供的信息

为了获得这些信息，我使用了useEffect钩子，在这里我调用动作

getRestaurants（）

我有另一个名为

RestauranteData

的组件，它是一个表，显示使用

dispatch

和

useSelector

钩子获得的所有信息

const dispatch = useDispatch();
const restaurantes = useSelector((state) => state.restaurantes);

如您所见，信息已成功显示在表中：

我需要调用另一个操作，以从另一个名为

consutitvos

的集合中获取信息。此集合包含的信息允许我在用户创建新餐厅时创建自定义id。为了获得这些信息，我有一个名为

getconsutivos

的操作

useEffect(() => {
        dispatch(getConsecutivos());
    });

const selectedConsecutivo = useSelector((state) => !currentConsecutivo ? state.consecutivos.find((c) => c.type === "Restaurants") : null);

我遇到的问题是，当我调用该操作时，状态会覆盖，有时表会显示

连续的OS

信息，而不是餐厅的信息。如果重新加载页面，表中显示的信息将发生更改

这是我在

Restaurant

组件中的完整代码

const Restaurante = () => {

    const [currentId, setCurrenteId] = useState(null);
    const [show, setShow] = useState(false);
    const dispatch = useDispatch();
    const [inputSearchTerm, setinputSearchTerm] = useState('');
    const [selectedTypeSearch, setSelectedTypeSearch] = useState('');
    const [inputSearchTermError, setinputSearchTermError] = useState('');
    const [currentConsecutivo, setCurrentConsecutivo] = useState(null);

    const reload=()=>{window.location.reload()};
   
    useEffect(() => {
        dispatch(getConsecutivos());
    });

   const selectedConsecutivo = useSelector((state) => !currentConsecutivo ? state.consecutivos.find((c) => c.tipo === "Restaurantes") : null);
   console.table(selectedConsecutivo);

    

    
    
    useEffect(() => {
        dispatch(getRestaurantes());
    }, [ currentId, dispatch ]);

RestauranteData完整代码（呈现表格）

consutivos.js还原程序代码

const reducer = (consecutivos = [], action) => {
    switch (action.type) {
        case 'DELETE':
            return consecutivos.filter((consecutivo) => consecutivo._id !== action.payload); //keep all the consecutivos but the action.payload
        case 'UPDATE':
            return consecutivos.map((consecutivo) => consecutivo._id === action.payload.id ? action.payload : consecutivo);
        case 'FETCH_ALL':
            return action.payload;
        case 'CREATE':
            return [...consecutivos, action.payload];
    
        default:
            return consecutivos;
    }
}

export default reducer; 

index.js组合减速器

import { combineReducers } from 'redux';
import consecutivos from './consecutivos';
import restaurantes from './restaurantes';


export default combineReducers({ consecutivos, restaurantes });

应用程序的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; //Keep track of the Store
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './App';

const store = createStore(reducers, compose(applyMiddleware(thunk)));


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}//跟踪商店
从'redux'导入{createStore，applyMiddleware，compose}；
从“redux thunk”导入thunk；
从“./reducers”导入减速机；
从“./App”导入应用程序；
const store=createStore（reducer，compose（applyMiddleware，thunk））；
ReactDOM.render(
, 
document.getElementById（'root'））
);

在您的reducer函数中，您将使用不同的操作类型名称，而不是使用相同的名称，并在操作方法中更改操作类型名称

const reducer = (restaurantes = [], action) => {
    switch (action.type) {
        case 'DELETE_RESTAURANT':
            return restaurantes.filter((restaurante) => restaurante._id !== action.payload); //keep all the restaurantes but the action.payload
        case 'UPDATE_RESTAURANT':
            return restaurantes.map((restaurante) => restaurante._id === action.payload.id ? action.payload : restaurante);
        case 'FETCH_ALL_RESTAURANT':
            return action.payload;
        case 'CREATE_RESTAURANT':
            return [...restaurantes, action.payload];
    
        default:
            return restaurantes;
    }
}

export default reducer; 



const reducer = (consecutivos = [], action) => {
    switch (action.type) {
        case 'DELETE_CONSECUTIVOS':
            return consecutivos.filter((consecutivo) => consecutivo._id !== action.payload); //keep all the consecutivos but the action.payload
        case 'UPDATE_CONSECUTIVOS':
            return consecutivos.map((consecutivo) => consecutivo._id === action.payload.id ? action.payload : consecutivo);
        case 'FETCH_ALL_CONSECUTIVOS':
            return action.payload;
        case 'CREATE_CONSECUTIVOS':
            return [...consecutivos, action.payload];
    
        default:
            return consecutivos;
    }
}

export default reducer; 

---

状态被覆盖。。。？请在问题中包含处理这些已调度操作和更新状态的相关reducer代码。如果在reducer函数中添加默认状态，请检查switch函数的默认状态是否存在。两个reducer函数中的操作类型名称是否相同。我认为这就是问题所在。Restariants和Concertive使用相同的类型，使用'CREATE@RESTAURANTE', 'CREATE@CONSECURTIVO'而不是在createBaskaran和createBaskaran中使用CREATE。您在两个不同的减速器中使用相同的操作类型，这会在您不希望的情况下触发“其他”减速器中的有效负载处理。我按照您的建议进行了更改，现在它已启动并运行！感谢您的帮助，感谢您抽出时间回答我的问题！

import { combineReducers } from 'redux';
import consecutivos from './consecutivos';
import restaurantes from './restaurantes';


export default combineReducers({ consecutivos, restaurantes });

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; //Keep track of the Store
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

import App from './App';

const store = createStore(reducers, compose(applyMiddleware(thunk)));


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

const reducer = (restaurantes = [], action) => {
    switch (action.type) {
        case 'DELETE_RESTAURANT':
            return restaurantes.filter((restaurante) => restaurante._id !== action.payload); //keep all the restaurantes but the action.payload
        case 'UPDATE_RESTAURANT':
            return restaurantes.map((restaurante) => restaurante._id === action.payload.id ? action.payload : restaurante);
        case 'FETCH_ALL_RESTAURANT':
            return action.payload;
        case 'CREATE_RESTAURANT':
            return [...restaurantes, action.payload];
    
        default:
            return restaurantes;
    }
}

export default reducer; 



const reducer = (consecutivos = [], action) => {
    switch (action.type) {
        case 'DELETE_CONSECUTIVOS':
            return consecutivos.filter((consecutivo) => consecutivo._id !== action.payload); //keep all the consecutivos but the action.payload
        case 'UPDATE_CONSECUTIVOS':
            return consecutivos.map((consecutivo) => consecutivo._id === action.payload.id ? action.payload : consecutivo);
        case 'FETCH_ALL_CONSECUTIVOS':
            return action.payload;
        case 'CREATE_CONSECUTIVOS':
            return [...consecutivos, action.payload];
    
        default:
            return consecutivos;
    }
}

export default reducer;