我真的很喜欢新的React钩子,我经常在我正在做的项目中使用它们。我遇到了一种情况,我想在useState
hook中使用prevState,但我不确定如何做到这一点。
我尝试过类似的东西,但它无法编译。
const [ someState, setSomeState ] = useState( new Map() )
setSomeState( prevState.someState.set( key, value ) )
(顺便说一句,这是映射一组复选框,以跟踪打了复选标记的复选框)
我试图在这里遵循这个例子,但是不使用setState函数。
谢谢你的帮助!
状态更新程序
fromuseState
提供了一个回调模式,该模式将返回您可以用于更新当前状态的前一个状态
const [ someState, setSomeState ] = useState( new Map() )
setSomeState(prevState => prevState.set( key, value ) )
为了使用地图,您需要在操作这些值之前克隆它。否则,它会对原始的Map
进行变异,并且React不会处理可变异的state
。
const handleChange = useCallback(({ target: { name, checked } }) => {
setCheckbox(prevState => {
return new Map(prevState).set(name, checked);
});
}, []);
更新的工作示例:
对于对象,可以使用spread操作符在setState
调用中使用prevState
。
const [object, setObject] = useState({
firstKey: '',
secondKey: '',
});
setObject((prevState) => ({
...prevState,
secondKey: 'value',
}));
// object = {
// firstKey: '',
// secondKey: 'value',
// }
下面的代码段显示了使用prevState
设置对象状态的示例。
const {useState} = React;
const Example = ({title}) => {
const initialState = {
firstKey: 'empty',
secondKey: 'empty',
thirdKey: 'not empty',
}
const [object, setObject] = useState(initialState);
const withPrevState = () => {
setObject((prevState) => ({
...prevState,
secondKey: 'not empty',
}));
}
return (
<div>
<h5>Updates Second key to 'not empty'</h5>
<p>First key: {object.firstKey}</p>
<p>Second key: {object.secondKey}</p>
<p>Third key: {object.thirdKey}</p>
<button onClick={withPrevState}>
Update with prevState
</button>
<button onClick={() => {setObject({secondKey: 'not empty'})}}>
Update without prevState
</button>
<button onClick={() => {setObject(initialState)}}>
Reset
</button>
</div>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
我想根据等于传递的属性删除嵌套对象。此时,将替换整个对象。当我尝试使用useState更新状态时,我遗漏了一些东西,可能是我循环对象的方式? 更新:问题已关闭,以响应更新嵌套对象的可用答案。这个问题涉及阵列,我认为这是当前问题的一部分。请注意此问题与的性质差异。可能需要使用语句,或者使用不同的方法对id进行过滤。。 我的初始对象看起来像这样: 我这样浏览每一项:
我还是ReactJs的初学者。实际上我想重写我的类组件来钩住组件,但是我的代码有一部分有问题。有人能帮我把这个组件重写成钩子吗? 这是我的代码:
我想使用wordpress在我的网站上添加变体 我尝试了很多插件,但它们不能满足我的要求。 要求: 我想根据给定的变化变化价格: 任何人都可以引用插件或函数?
我有一个类组件,它返回使用Redux存储完全填充的状态: 但是,当我将上面的类组件切换到下面的功能组件,以便可以在代码中使用ReactJS钩子时,状态始终为空。
当您通过提交表单调用API请求时,如何设置Axios响应?我想从/在POST方法中发送表单,并获得API响应,然后用API响应重定向到/result页面。我的代码在下面,它引发 警告:无法对卸载的组件执行React状态更新。 这是一个no-op,但它表示应用程序中存在内存泄漏。 若要修复,请取消useEffect清理函数中的所有订阅和异步任务。在家(在app.js:21) 完成handleSubm
我试图了解如何构建具有不同"页面"或"视图"的ReactJS应用程序。 我将以下组件作为我的基础应用程序,并且我正在React状态中使用currentState属性在视图中的活动组件之间切换。 它执行此任务,但在启动dataLoaded回调时,组件从不接收更新的recipes数组。 如何根据应用程序中的更新状态更新道具? 还是我处理这整件事的方式错了?