Reactjs 如何将useState与{}一起使用？

鉴于此

const[question，setQuestion]=useState（{}）

问题可以包含标题和说明

即

如何使用

setQuestion

独立设置标题和说明

setQuestion({
  title: 'YOUR_TITLE',
  description: 'YOUR_DESCRIPTION',
  id: '13516',
})

无法编辑状态。您需要始终设置新值。因此，它可以替换为如下所示

setQuestion({
……问题，
标题：“新标题”
})

或

---

如果这是您使用的常见模式，那么我建议您编写自己的钩子来实现您想要的功能

如果是一次性操作，则可以使用“对象扩展”操作符相当干净地执行此操作：

setQuestion({
  ...question,
  title: 'updated title',
});

下面是它被拉到一个单独的钩子里的样子：

const useMergeState = (initial) => {
  const [state, setState] = React.useState(initial);
  const mergeState = React.useCallback((update) => setState({...state, ...update}));
  return [state, mergeState];
};

---

从

useState（）

获得的setter函数期望传递一个参数，该参数将完全替换旧状态。因此，您不能仅使用它来更新标题，而不传入所有其他属性

但是您可以从现有的state对象派生一个新的state对象，然后将整个对象传递给

setQuestion（）

---

在这种情况下，我喜欢做的一件事是使用

React.useReducer

hook：

函数应用程序（）{
常量initialState={
标题：“我的标题”，
描述：“我的描述”
}
const[state，setState]=React.useReducer(
（p，n）=>（{…p，…n}），
初始状态
)
返回(
{state.title}

{state.description}

setState（{description:'newdescription'}）}>
设置新描述
)
}

这样，您只需更改所需的属性，而不必复制旧的状态对象并基于新旧值创建新的状态对象

另外，如果您刚开始使用

hook

s，它可能看起来更熟悉，因为它与类组件内部的

this.setState（）

调用类似

下面是一个小示例，展示了这种方法的实际应用：

报告说：

将所有状态放在一个useState调用中，以及 每个字段都可以使用useState调用。然而，组件往往是最重要的 当您在这两个极端之间找到一个平衡点时，就可以阅读了 将相关状态转换为几个独立的状态变量

例如：

如果状态逻辑变得复杂，我们建议使用reducer或自定义挂钩来管理它

---

另外，请记住，如果您在useState（{}）钩子中使用任何状态对象，那么与经典的this.setState不同，更新状态变量总是替换它，而不是合并它，因此您需要扩展以前的状态，以避免丢失它的一些属性，例如：

setResource>（…资源，名称：'newName'）；

如果要单独设置它们，为什么不拆分状态？这是

useState

setQuestion({
  ...question,
  title: 'updated title',
});

const useMergeState = (initial) => {
  const [state, setState] = React.useState(initial);
  const mergeState = React.useCallback((update) => setState({...state, ...update}));
  return [state, mergeState];
};

setQuestion({
   ...question,
   title: "New title",
})

  const [position, setPosition] = useState({ left: 0, top: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });