如何在react中卸载组件

Question

我想重置组件中的状态，我能做什么？？如何在状态下设置默认值它写但不工作

useEffect(() => { 
dispatch(
setMapStateAction({
searchCity: '',
searchLocation: '',
showSearchCityResult: false,
showSearchLocationResult: false,
selectedCity: {
id: defaultViewPort.id,
name: defaultViewPort.name,
lat: defaultViewPort.latitude,
lng: defaultViewPort.longitude,
},
viewport: {
latitude: 35.69976003841564,
longitude: 51.33808390275898,
},
})
);
}, []);

Answer 1

您应该在redux reducer/slice中初始化您的状态，而不是在React组件的useEffect中。

const initialState = { searchCity: '', searchLocation: '', ...etc}

const mapSlice= createSlice({
name: 'map',
initialState,
reducers: {}
});

Answer 2

如果要在组件卸载时重置状态，则必须在useEfect return函数中调度操作例如

useEffect(() => { 

// whatever you write in return function it will run after coponent unmount
return () = >{
dispatch(
setMapStateAction({
searchCity: '',
searchLocation: '',
showSearchCityResult: '',
showSearchLocationResult: '',
selectedCity: {
id: '',
name: '',
lat: '',
lng: '',
},
viewport: {
latitude: '',
longitude: '',
},
})
)
}
}, [])
;