如何在React中动态创建useState状态变量？

在React里别想着动态生成命名的useState变量了，这既不符合React的状态管理逻辑，还容易出问题（比如eval本身就有安全风险，而且React没法正确追踪动态创建的状态）。换个思路，用单一对象状态来管理所有书架，比你折腾动态变量靠谱多了。

具体实现步骤 #

• 初始化一个包含默认书架的状态对象，键用书架的驼峰名称，值是对应书籍数组：

const [bookshelves, setBookshelves] = useState({
  reading: [],
  read: [],
  wantToRead: [],
  // 自定义书架后续会动态添加到这里
});

• 写一个添加自定义书架的函数，接收驼峰命名的书架名，直接更新状态对象：

const addCustomBookshelf = (shelfName) => {
  // 避免重复添加同名书架
  if (!bookshelves.hasOwnProperty(shelfName)) {
    setBookshelves(prev => ({
      ...prev,
      [shelfName]: []
    }));
  }
};

• 要获取某个书架的书籍，直接通过键访问：

// 比如获取audiobooks书架的书籍
const audiobooks = bookshelves.audiobooks || [];

• 更新某个书架的书籍时，写一个通用的更新函数：

const updateBookshelf = (shelfName, newBooks) => {
  setBookshelves(prev => ({
    ...prev,
    [shelfName]: newBooks
  }));
};

// 调用示例：给julyBookClub添加一本书
updateBookshelf('julyBookClub', [...bookshelves.julyBookClub, newBook]);

完整组件示例 #

import { useState } from 'react';

function BookLibrary() {
  const [bookshelves, setBookshelves] = useState({
    reading: ['《React实战》'],
    read: ['《JavaScript高级程序设计》'],
    wantToRead: ['《TypeScript权威指南》'],
  });
  const [newShelfName, setNewShelfName] = useState('');

  const addCustomBookshelf = () => {
    if (!newShelfName.trim()) return;
    // 把输入的名称转成驼峰格式
    const camelCaseName = newShelfName.trim().replace(/\s+(\w)/g, (_, c) => c.toUpperCase()).toLowerCase();
    if (!bookshelves.hasOwnProperty(camelCaseName)) {
      setBookshelves(prev => ({ ...prev, [camelCaseName]: [] }));
      setNewShelfName('');
    }
  };

  const addBookToShelf = (shelfName, book) => {
    setBookshelves(prev => ({
      ...prev,
      [shelfName]: [...prev[shelfName], book]
    }));
  };

  return (
    <div>
      <h2>我的图书库</h2>
      {/* 添加自定义书架 */}
      <div>
        <input
          type="text"
          value={newShelfName}
          onChange={(e) => setNewShelfName(e.target.value)}
          placeholder="输入自定义书架名称"
        />
        <button onClick={addCustomBookshelf}>添加书架</button>
      </div>

      {/* 渲染所有书架 */}
      {Object.entries(bookshelves).map(([shelfName, books]) => (
        <div key={shelfName}>
          <h3>{shelfName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}</h3>
          <ul>
            {books.map((book, idx) => (
              <li key={idx}>{book}</li>
            ))}
          </ul>
          <button onClick={() => addBookToShelf(shelfName, prompt('输入书名'))}>添加书籍</button>
        </div>
      ))}
    </div>
  );
}

export default BookLibrary;

为什么不用动态useState？ #

1. React状态追踪问题：React需要稳定的状态变量来追踪更新，动态生成的变量无法被React的hooks机制正确识别，容易导致状态不同步。
2. 安全与维护性：eval执行字符串代码有注入风险，而且动态变量会让代码变得混乱，后续排查问题、维护起来非常麻烦。
3. 没必要：用对象或Map就能完美实现多书架的状态管理，逻辑清晰，符合React的设计理念。

内容的提问来源于stack exchange，提问作者chanelle.green