如何更改钩子中的特定变量值

Question

我有以下initialState：

const intialFormState = {
age: "",
multiline: "",
currency: "",
name: "",
firstName: "",
lastName: "",
phone: "",
email: "",
city: "",
country: "",
gender: "",
password: "",
check1: "",
check2: "",
check3: "",
skills: [],
edit: false,
userid: "",
touched: {
name: false,
phone: false,
email: false
}
};
const [user, setUser] = useState(intialFormState);

我想知道如何只更改check1、check2和check3值

Answer 1

只需spread原始对象并替换所需的properties

const changeCheck1 = () => ({
...initialFormState,
check1: 'foo'
})
const result = changeCheck1()
setUser(result)

Answer 2

你必须通过setUser访问，但请注意，使用钩子，你传递给setUser的内容将被复制到user中。

因此，为了仅更新某个字段，您必须执行原始状态的副本，仅更新所需的字段，然后使用更新的对象调用 set 方法

Answer 3

你可以用很多方法做到这一点，请参考：这个链接：

const newUser = {...user, check1: true, check2: false, check3: true};
setUser(newUser);

或

setUser({check1: true, check2: false, check3: true});

Answer 4

它与以前值作为参数的老式setState非常相似，如果您只想更新特定字段而不影响其他字段，以下是操作方法

// Change check 1 value without affect the other
setUser((prevUser) => ({
...prevUser,
check1: 'some_value'
}));