子组件不重新呈现父组件。
代码很长，但想法是：
我有3个组件-- Base组件，MapComponent，ShipComponent
App组件使用容器调用MapComponent，MapComponent使用容器调用ShipComponent lso。Map和Ship容器都连接到存储。Map和Ship组件使用相同的多数组数据并传递给mapStateToProps。
在使用useEffect()的组件工具中，调用一个操作来生成数据并将其放入存储中。
这一问题：
子组件(组件传递)重新呈现很好，但是组件映射(父组件)甚至不使用父映射组件也使用相同的shipLocation数组。map和Ship组件都是从相同的redux存储中获得的。
为什么执行操作后的子组件会重新呈现，而父组件却没有？我该怎么修呢？
作为一种测试，我没有将动作通过mapDispatchToProps传递给ShipComponent，而是将其交给MapComponent，并将其传递给ShipComponent以供其执行。只有到那时，它才更新父MapComponent。但是我需要ShipComponent来获取操作并更新MapComponent。
编辑添加的代码示例：
所以根组件(App)
import React from "react";
import { Provider } from "react-redux";
import Map from "../containers/Map";
import mainStore from "../store";
const store = mainStore();
function AppComponent(props) {
return (
<Provider store={store}>
<Map />
</Provider>
);
}
export default AppComponent;它调用容器映射，它将所有状态数据从存储传递到组件MapComponent。
import { connect } from "react-redux";
import MapComponent from "../components/MapComponent";
const mapStateToProps = ({ shipR }) => {
return {
shipLocation: [...shipR.shipLocation],
};
};
const mapDispatchToProps = (dispatch) => {
return {
};
};
const Map = connect(mapStateToProps, mapDispatchToProps)(MapComponent);
export default Map;MapComponent：
import React from "react";
import { Provider } from "react-redux";
import mainStore from "../store";
import Ship from "../containers/Ship";
const store = mainStore();
function MapComponent(props) {
return (
<div id="__Map__">
{
<Provider store={store}>
<Ship />
</Provider>
}
</div>
);
}
export default MapComponent;这个MapComponent调用ShipComponent容器
import { connect } from "react-redux";
import ShipComponent from "../components/ShipComponent";
import { generateDefaultShips, shipToggle } from "../actions/shipAction";
const mapStateToProps = ({ shipR }) => {
return {
shipLocation: [...shipR.shipLocation],
};
};
const mapDispatchToProps = (dispatch) => {
return {
genShips() {
dispatch(generateDefaultShips());
},
};
};
const Ship = connect(mapStateToProps, mapDispatchToProps)(ShipComponent);
export default Ship;ShipComponent组件如下所示：
import React, { useEffect } from "react";
function ShipComponent(props) {
useEffect(() => {
props.genShips();
}, []);
return (
<div className="ship"></div>
);
}
export default ShipComponent;genShips()是一个动作：
import { SHIP_GENERATION_RESULT } from "../constants";
export function generateDefaultShips() {
let arr = [];
for (let x = 0; x < 7; x++) {
arr[x] = [];
for (let y = 0; y < 11; y++) arr[x][y] = null;
}
return { type: SHIP_GENERATION_RESULT, ships: arr };
}MapComponent减速器：
const initiateState = {
};
function mapReducer(state = initiateState, action) {
return state;
}
export default mapReducer;和ShipComponent减速器：
import {
SHIP_GENERATION_RESULT,
} from "../constants";
const initiateState = {
shipLocation: [],
};
function shipReducer(state = initiateState, action) {
switch (action.type) {
case SHIP_GENERATION_RESULT: {
return {
...state,
shipLocation: action.ships,
};
}
default:
return state;
}
}
export default shipReducer;常数index.js包含：export const SHIP_GENERATION_RESULT = "SHIP_GENERATION_RESULT";
所有这些容器、常量、组件和操作都位于不同的文件中()。
附注：子组件ShipComponent可以很好地获取shipLocation多数组数据，但是由于MapComponent (父组件)没有重新呈现，所以没有。
O和reduxers index.js：
import { combineReducers } from "redux";
import mapReducer from "./mapReducer";
import shipReducer from "./shipReducer";
const allReducers = combineReducers({
mapR: mapReducer,
shipR: shipReducer,
});
export default allReducers;商店index.js：
import { createStore, applyMiddleware } from "redux";
import thunkMiddleware from "redux-thunk";
import allReducers from "../reducers";
import { composeWithDevTools } from "redux-devtools-extension";
export default function mainStore(prevState) {
return createStore(
allReducers,
prevState,
composeWithDevTools(applyMiddleware(thunkMiddleware))
);
}回答 1
Stack Overflow用户
发布于 2020-10-09 01:57:11
您正在为App和Map组件使用不同的存储库，删除该存储区，并帮助它在MapComponent中提供服务。在所有的应用程序中，应该只有一个redux存储来保证所有数据是一致的。
https://stackoverflow.com/questions/64272386
复制相似问题
腾讯云开发者
