如何使用React useState钩子多次更新同一事件的状态？
如何使用React useState钩子多次更新同一事件的状态？
提问于 2020-04-08 13:07:29
我想知道是否有可能在一个事件中多次更新状态。假设我有一个表单，其中可能需要使用多个inputs来更新单个状态，其逻辑类似于下面的示例：
在父组件中定义的状态：
import React, { useState } from "react";
function ParentComponent() {
const [state, setState] = useState([]);
return (
<ChildComponent state={state} setState={setState} />
)};
export default ParentComponent;子组件中的状态已更新：
import React, { useState } from "react";
function ChildComponent(props) {
const onSubmit = data => {
if(someLogicHere) {
props.setState(_ => [...props.state, data]);
}
if(someOtherLogicHere) {
props.setState(_ => [...props.state, data]);
}
}
return (
//Form goes here
)};
export default ChildComponent;使用此方法时，只有第一个if语句的输出返回onSubmit并添加到状态对象中。有没有一种方法可以添加所有可能的if语句的输出？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-08 13:13:39
我会先构建数组，然后更新一次状态，如下所示：
const onSubmit = data => {
let result = [...props.state];
if(someLogicHere) {
result.push(data);
}
if(someOtherLogicHere) {
result.push(data);
}
props.setState(result);
}Stack Overflow用户
发布于 2020-04-08 13:10:50
您可以使用setState的回调表单来实现：
function ChildComponent(props) {
const onSubmit = data => {
if(someLogicHere) {
props.setState(state => [...state, data]);
// −−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−^^^^^
}
if(someOtherLogicHere) {
props.setState(state => [...state, data]);
// −−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−^^^^^
}
}
return (
//Form goes here
)};确保重叠调用不会导致数据丢失。
Stack Overflow用户
发布于 2020-04-08 13:13:35
不要在所有if条件中使用多个setState()，而是创建一个组合的更新对象，然后合并到状态中
例如：
const onSubmit = data => {
const data = {};
if(someLogicHere) {
data['a'] = 1;
}
if(someOtherLogicHere) {
data['b'] = 2;
}
if(anotherLogic) {
data['b'] = data['b'] + 10;
}
props.setState(_ => [...props.state, data]);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61101439
复制相关文章
相似问题
腾讯云开发者
