Question

为此。

const [question, setQuestion] = useState({})

和question可以包含标题和描述。

IE。

{ 
  title: 'How to use useState with {}?', 
  decription: 'given this..`const [question, setQuestion] = useState({})`and `question` can contain a title and a description. I.E.    {       title: 'How to use useState with {}?',       decription: ''     }How can the title and description be set independently with `setQuestion`?'
 }

如何使用setQuestion独立设置标题和描述？

Answer 1

从useState()获得的setter函数希望传递参数，该参数将完全替代旧状态。因此，您不能仅通过它来更新标题，而不必同时传递所有其他属性。

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

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

Answer 2

如果这是您常用的模式，那么我建议您编写自己的钩子来实现所需的功能。

如果这是一次性的事情，那么您可以使用对象散布运算符相当干净地完成它：

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];
};

Answer 3

在这种情况下，我想做的一件事是改用React.useReducer钩子：

function App() {
  const initialState = { 
    title: 'My title',  
    description: 'My description'
  }
  const [state, setState] = React.useReducer(
    (p, n) => ({ ...p, ...n }),
    initialState
  )
  return (
    <div>
      <p>{state.title}</p>
      <p>{state.description}</p>
      <button onClick={() => setState({ description: 'New description' })}>
        Set new description
      </button>
    </div>
  )
}

这样，您只需更改所需的属性，而不必处理复制旧状态对象并根据新旧值创建新对象的情况。

此外，由于您与类组件内部的hook调用相似，因此如果您只是从this.setState()开始，您可能会觉得更熟悉。

这里有一个小例子，展示了这种方法的实际作用：

example

Answer 4

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

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

setQuestion({
  ...question,
  title: 'new title'
})

或

const newQuestion = { ...question, title: 'new title }
setQuestion(newQuestion)

Answer 5

official Docs说：

将所有状态都放在一个useState调用中，每个字段的useState调用都可以工作。但是，组件往往是大多数当您发现这两个极端之间的平衡时可读性很强，并分组相关状态转化为几个独立的状态变量。

例如：

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

如果状态逻辑变得复杂，我们建议使用 reducer 或自定义挂钩对其进行管理。

此外，请记住，如果您在 useState（{}）挂钩中使用任何状态对象，则与经典的 this.setState 不同，状态变量总是替换它而不是合并它。，因此您需要传播先前的状态，以免丢失其某些属性，例如：setResource(…resource, name: ‘newName’);

如何在{}中使用useState？

5 个答案: