React动态加载字段点击更新按钮不生效？原因及解决方法

嘿，我来帮你拆解这个问题：

问题根源 #

当你点击「Load Dynamic Field」按钮时，loadField方法里创建了<div>{this.state.name}</div>这个元素——注意哦，这时候它直接把当时state里的"Old Name"字符串值硬编码进div里了，相当于存了一个值的「快照」到state.dynamicFields里。

React的state更新只会触发组件重新渲染，但你存在dynamicFields里的div已经是一个固定的、生成好的JSX元素了，它不会因为后续state的name变化而自动更新。因为它没有和state的name建立动态绑定，只是在创建那一刻取了一次值而已。

简单说：你把「静态的视图结果」存在了state里，而不是把「生成视图的逻辑」和数据绑定起来。

解决方案 #

这里有两种常见的解决思路，优先推荐第一种，更贴合React的设计理念：

方案1：不在state里存JSX，只存控制标记或数据

React的核心是「数据驱动视图」，我们应该在state里存数据或控制状态，然后在render方法里根据最新的state动态生成视图。

修改后的代码如下：

interface State {
  showDynamicField: boolean; // 用布尔值标记是否显示动态字段
  name: string;
}
export default class Page extends React.Component<{}, State> {
  public constructor(props: {}) {
    super(props);
    this.state = {
      showDynamicField: false,
      name: "Old Name"
    };
  }
  private updateField = () => {
    this.setState({ name: "New Name" });
  };
  public loadField = () => {
    this.setState({ showDynamicField: true }); // 只更新显示标记
  };
  public render(): JSX.Element {
    return (
      <div>
        <button onClick={this.loadField}>Load Dynamic Field</button>
        <button onClick={this.updateField}>Update Field</button>
        {/* 每次render都会根据最新的state.name生成div */}
        {this.state.showDynamicField && <div>{this.state.name}</div>}
      </div>
    );
  }
}

这样每次state更新时，render方法都会重新执行，div里的内容自然会用上最新的name值。

方案2：存储渲染函数（适合复杂动态场景）

如果你的场景确实需要动态添加不同的渲染逻辑，可以在state里存返回JSX的函数，而不是直接存JSX元素。这样每次render时调用函数，都会获取最新的state值：

interface State {
  dynamicFieldRenderers: (() => JSX.Element)[]; // 存储渲染函数
  name: string;
}
export default class Page extends React.Component<{}, State> {
  public constructor(props: {}) {
    super(props);
    this.state = {
      dynamicFieldRenderers: [],
      name: "Old Name"
    };
  }
  private updateField = () => {
    this.setState({ name: "New Name" });
  };
  public loadField = () => {
    // 存一个函数，调用时会取当前最新的state.name
    const renderers = [() => <div key={Math.random()}>{this.state.name}</div>];
    this.setState({ dynamicFieldRenderers: [...renderers] });
  };
  public render(): JSX.Element {
    return (
      <div>
        <button onClick={this.loadField}>Load Dynamic Field</button>
        <button onClick={this.updateField}>Update Field</button>
        {/* 调用渲染函数生成最新的JSX */}
        {this.state.dynamicFieldRenderers.map(renderer => renderer())}
      </div>
    );
  }
}

总结 #

React的state设计初衷是用来存储数据和状态标记，而不是已经渲染好的视图元素。视图应该由数据驱动，在render阶段动态生成，这样才能保证数据和视图的同步性。

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