React中如何让动态创建的元素同步更新state状态？

你遇到的核心问题是：初始渲染时生成的defaultPanes里的JSX捕获了当时的value值，之后value变化时，存储在items状态里的JSX并没有被重新生成，因此视图无法同步更新。

以下是几种可行的解决方案：

方案1：用useMemo动态生成面板配置（推荐） #

把defaultPanes用useMemo包裹，依赖value状态，这样每次value变化时都会重新生成包含最新value的面板配置，确保视图同步：

import * as React from 'react'

export default function App() {
  const [value, setValue] = React.useState('default');
  // 依赖value动态生成面板，value变化时自动重新计算
  const defaultPanes = React.useMemo(() => {
    return new Array(1).fill(null).map((_, index) => {
      const id = String(index + 1);
      return {
        label: `Some label`,
        children: (
          <div>
            Child {id}, value: {value}
          </div>
        ),
        key: id,
      };
    });
  }, [value]);

  const [items, setItems] = React.useState(defaultPanes);

  return (
    <div>
      <h1>{items[0].label}</h1>
      <div>{items[0].children}</div>
      <p onClick={() => setValue('new value')}>点击我</p>
    </div>
  );
}

方案2：只在状态中存储数据，渲染时生成JSX（更简洁） #

如果不需要在状态中保存完整的JSX，只存储必要的数据（比如ID、标签），在渲染阶段再插入最新的value，这种方式更符合React的状态设计思路：

import * as React from 'react'

export default function App() {
  const [value, setValue] = React.useState('default');
  // 状态只存基础数据，不存JSX
  const [items, setItems] = React.useState(() => {
    return new Array(1).fill(null).map((_, index) => {
      const id = String(index + 1);
      return {
        label: `Some label`,
        id,
        key: id,
      };
    });
  });

  return (
    <div>
      <h1>{items[0].label}</h1>
      {/* 渲染时结合最新的value生成视图 */}
      <div>
        Child {items[0].id}, value: {value}
      </div>
      <p onClick={() => setValue('new value')}>点击我</p>
    </div>
  );
}

方案3：监听value变化手动更新items（适合必须存JSX的场景） #

如果业务场景要求必须在状态中保存JSX，可以通过useEffect监听value的变化，手动更新items里的children：

import * as React from 'react'

export default function App() {
  const [value, setValue] = React.useState('default');
  const [items, setItems] = React.useState(() => {
    const id = '1';
    return [{
      label: `Some label`,
      children: (
        <div>
          Child {id}, value: {value}
        </div>
      ),
      key: id,
    }];
  });

  // 监听value变化，更新items中的children
  React.useEffect(() => {
    setItems(prevItems => {
      return prevItems.map(item => ({
        ...item,
        children: (
          <div>
            Child {item.key}, value: {value}
          </div>
        )
      }));
    });
  }, [value]);

  return (
    <div>
      <h1>{items[0].label}</h1>
      <div>{items[0].children}</div>
      <p onClick={() => setValue('new value')}>点击我</p>
    </div>
  );
}

总结 #

优先选择方案1或方案2，因为它们避免了不必要的状态更新，也更符合React的状态管理原则——状态应该存储数据，而不是直接存储JSX，JSX最好在渲染阶段根据数据动态生成。

内容的提问来源于stack exchange，提问作者Tobi