如何使用React Hooks填充对象内部的数组

React Hooks是React 16.8版本引入的一种新的特性，它允许我们在无需编写类组件的情况下，使用状态和其他React特性。在React Hooks中，可以使用useState Hook来管理组件的状态。要填充对象内部的数组，可以使用useState Hook结合扩展运算符(...)来实现。

以下是一个使用React Hooks填充对象内部数组的示例：

import React, { useState } from 'react';

function App() {
  const [user, setUser] = useState({
    name: 'John Doe',
    hobbies: ['reading', 'swimming']
  });

  const addHobby = () => {
    setUser(prevUser => ({
      ...prevUser,
      hobbies: [...prevUser.hobbies, 'coding']
    }));
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <ul>
        {user.hobbies.map((hobby, index) => (
          <li key={index}>{hobby}</li>
        ))}
      </ul>
      <button onClick={addHobby}>Add Hobby</button>
    </div>
  );
}

export default App;

在上面的示例中，useState Hook用于声明了一个名为user的状态变量和一个名为setUser的更新函数。初始状态user包含一个name属性和一个hobbies属性，后者是一个数组。通过扩展运算符(...)，我们可以在更新函数中先复制原来的user对象，然后将新的hobby添加到hobbies数组中，保持了对象的不可变性。

通过点击"Add Hobby"按钮，调用addHobby函数，将新的hobby添加到user对象的hobbies数组中。更新后的user对象会重新渲染到DOM中，显示出新的hobby。

这样，我们就使用React Hooks成功填充了对象内部的数组。

注意：以上答案是基于React Hooks的，如果需要使用类组件实现同样的功能，可以使用setState方法来实现类似的效果。

关于腾讯云的相关产品和链接地址，请访问腾讯云的官方文档和网站以获取更多信息。