react 怎么改变函数组件对象

在 React 中，函数组件是无状态的，意味着你不能够直接修改组件的状态。如果你想要更改组件状态，你需要使用 React 的钩子函数 `useState`。

使用 `useState` 钩子函数，你可以在函数组件中定义一个状态变量，并且使用它来控制组件的状态。当状态变量发生变化时，React 会重新渲染组件。

以下是使用 `useState` 钩子函数更改函数组件对象的示例：

import React, { useState } from 'react';

function MyComponent() {
  const [myObject, setMyObject] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // 更改对象的 name
    setMyObject({ ...myObject, name: 'Jane' });
  };

  return (
    <div>
      <p>{myObject.name}</p>
      <p>{myObject.age}</p>
      <button onClick={handleClick}>更改名字</button>
    </div>
  );
}

在上面的示例中，我们使用 `useState` 钩子函数定义了一个名为 `myObject` 的状态变量，并且初始化为 `{ name: 'John', age: 30 }`。在组件中，我们使用 `myObject.name` 和 `myObject.age` 来显示状态变量的值。

当点击按钮时，我们使用 `setMyObject` 函数来更改对象的 `name` 属性。请注意，我们在这里使用了展开运算符 `...` 来复制原始对象，然后再更新 `name` 属性。这是因为 `setMyObject` 函数不会自动合并对象属性，而是会完全替换原始对象。

总之，使用 `useState` 钩子函数可以让你在函数组件中控制状态变量，并且更改对象属性。