提问人：Zak Thompson 提问时间：11/8/2023 更新时间：11/8/2023 访问量：60
使用打字稿在非钩子反应中进行条件反应状态更新的正确方法是什么？
What is the proper way to do conditional react state updates in non-hook react with typescript?
问：
我正在尝试在 react 中进行条件状态更新，其中某些键仅在另一个值更改时才会更新（如果选择了某些模式，用于将某些设置值重置为 null）。这种模式曾经工作得很好（就像几年前一样），但现在看来 React 的 setState 需要一个 Pick 对象而不是 Partial，如果将你的状态对象内联到 setState 调用中，这效果很好，但会阻止状态对象的条件构造更新。
尝试下面的代码，由于 setState 未采用部分代码而失败。newValue 是此代码摘录所来自的更改处理程序函数的数值参数。
const newState: Partial<localState> = {};
if (newValue !== 2) {
newState.settingA = null;
newState.settingTwo = null;
}
newState.multiCurrencyDynamicMode = newValue;
this.setState(newState);
我尝试将 newState 切换到，但由于 pick 的这种定义期望 localState 的每个键都存在，这失败了。const newState: Pick<localState, keyof localState>
答：
1赞
gerrod
11/8/2023
#1
的定义是：Partial
/**
* Make all properties in T optional
*/
type Partial<T> = {
[P in keyof T]?: T[P];
};
因此，在没有看到代码中如何定义的情况下，我猜它不允许未定义的属性;但是通过使用 ，它有效地将此类型创建为：localstatePartial
// Partial means that every property on your type now allow `undefined`:
type localState = {
settingA?: string | null;
settingTwo?: string | null;
otherProperty?: int;
// etc...
}
这可能与您的 .因此，您可以选择两种修复方法：localstate
- 将每个属性更改为可选 - 可能不是您想要做的！
localstate - 使用并仅列出要更改的键，例如：
Pick
const newState: Pick<localState, 'settingA' | 'settingTwo'> = {
settingA: localState.settingA,
settingTwo: localState.settingTwo,
};
if (newValue !== 2) {
newState.settingA = null;
newState.settingTwo = null;
}
newState.multiCurrencyDynamicMode = newValue;
this.setState(newState);
评论
TS2345: Argument of type Partial<localState> is not assignable to parameter of type localState | Pick<localState, keyof localState> | ((prevState: Readonly<localState>, props: Readonly<params>) => localState | ... 1 more ... | null) | null