我有一个从数据库中获取的对象列表(在我的例子中是“相册”)。我需要编辑这些对象。在 useEffect 挂钩的编辑组件中,我启动了使用其 ID 获取所需专辑的操作。这个动作有效。然而,在同一个 useEffect 中,我试图在触发动作 redux 状态之前获取更改的 by。现在我面临一个问题 - 我所获取的只是 previos 状态。如何在当前 redux 状态的 useEffect 获取中实现?
我在这里看到了类似的问题,但是没有一个答案对我的用例有帮助。
我正在使用 redux-thunk。
编辑组件。问题出现在 setFormData - 它从减速器获取先前的状态,而不是当前状态。它似乎在状态被 getAlbumById 改变之前触发:
//imports
const EditAlbum = ({
album: { album, loading},
createAlbum,
getAlbumById,
history,
match
}) => {
const [formData, setFormData] = useState({
albumID: null,
albumName: ''
});
useEffect(() => {
getAlbumById(match.params.id);
setFormData({
albumID: loading || !album.albumID ? '' : album.albumID,
albumName: loading || !album.albumName ? '' : album.albumName
});
}, [getAlbumById, loading]);
const { albumName, albumID } = formData;
const onChange = e =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
createAlbum(formData, history, true);
};
return ( //code );
};
EditAlbum.propTypes = {
createAlbum: PropTypes.func.isRequired,
getAlbumById: PropTypes.func.isRequired,
album: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
album: state.album
});
export default connect(
mapStateToProps,
{ createAlbum, getAlbumById }
)(withRouter(EditAlbum));
行动:
export const getAlbumById = albumID => async dispatch => {
try {
const res = await axios.get(`/api/album/${albumID}`);
dispatch({
type: GET_ALBUM,
payload: res.data
});
} catch (err) {
dispatch({
type: ALBUMS_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};
减速器
const initialState = {
album: null,
albums: [],
loading: true,
error: {}
};
const album = (state = initialState, action) => {
const { type, payload } = action;
switch (type) {
case GET_ALBUM:
return {
...state,
album: payload,
loading: false
};
case ALBUMS_ERROR:
return {
...state,
error: payload,
loading: false
};
default:
return state;
}
};
将不胜感激任何帮助/想法