我正在尝试使用redux操作在更改后使用当前状态更新数据库。
例如 removeStock被调用并将库存状态从[“ A”，“ B”，“ C”]更改为[“ A”，“ C”]
在此之后，我立即调用updateWatchlist将新状态发送到数据库。问题是，尽管页面上显示了正确的数据，但mapStateToProps没有更新，并且正在将原始数据发送到服务器。
行动
///update
export const updateWatchlist = (payload, selected) => async (dispatch: Function, getState) => {
const response = await axios
.put(`${API_URL}/api/editWatchlist/${selected}`, {body: payload}, tokenConfig(getState))
}
///Delete
export const removeStock = (payload) => ({
type: DELETE_STOCK,
payload,
});
零件
const Security = ({index, name, stocks, selected}) => {
const dispatch = useDispatch();
const [taskName, setTaskName] =useState(name)
const removeTask = (e) => {
e.stopPropagation()
dispatch(removeStock(index))
dispatch(updateWatchlist(stocks, selected))
}
return (
<Row className="list-group-item">
<div className="item-titles">
{name}
</div>
<button onClick={(e) => removeTask(e)} className="remove-item">
<i className="glyphicon glyphicon-remove"></i>
</button>
</Row>
);
}
const mapStateToProps = (state) => {
return {
stocks: state.Watchlist.stock.watchlist,
}
}
因为您的removeTask调用堆栈保留了stocks变量的原始值，而updateWatchlist的2个参数仍然引用该值。在redux中的状态更改后，只需重新渲染组件并更改存储
const removeTask = (e) => {
//// stocks not changed after dispatch(removeStock(index))
/// it just changed when component rerender
e.stopPropagation()
dispatch(removeStock(index))
dispatch(updateWatchlist(stocks, selected))
}
我的建议是您可以使用useEffect观察库存变化，然后更新您的watchList：
useEffect(()=>{
dispatch(updateWatchlist(stocks, selected))
},[stocks])
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句