如何解决调度将状态更新为当前状态的动作时,如何触发效果?
我有一个像这样的应用程序。国家包含一个目标。用户可以单击保存按钮以打开文件选择器并选择目标。预期的行为是,只要用户选择目标,应用程序就会执行保存。
以下代码几乎可以正常工作。但是不幸的是,当用户选择与先前状态相同的目标时,保存效果不会发生。
const [state,dispatch] = useReducer(reducer,{
target: "",});
const setTarget = async () => {
// user interacts with a file picker
dispatch({ type: SET_TARGET,target});
}
useEffect(
function save() {
if (state.target) {
// some side effects happen
}
},[state.target]
);
使用React和Hooks的世界解决此问题的好方法是什么?
解决方法
您可以使target
属性的值成为对象,而不仅仅是字符串。之所以起作用,是因为每次更新状态时,它将为target
属性返回一个新对象。
以下代码段提供了一个示例:
const reducer = (state,action) => {
switch (action.type) {
case "SET_TARGET":
return {
...state,target: { selectedTarget: action.payload }
};
default:
return state;
}
};
function App() {
const [state,dispatch] = React.useReducer(reducer,{
target: { selectedTarget: "" }
});
React.useEffect(() => {
console.log("effect ran");
console.log(state.target);
},[state.target]);
const handleClick = () => {
dispatch({ type: "SET_TARGET",payload: "New Target" });
};
return (
<button onClick={handleClick}>Update Target</button>
);
}
ReactDOM.render(<App />,document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。