ReactJS组件中如何避免componentDidMount()重复调用？

看起来你遇到的核心问题是：打开模态框时，Actions组件的componentDidMount被意外重新执行了——正常情况下，componentDidMount只会在组件首次挂载时运行一次，而模态框的显示/隐藏只是触发主组件的state更新，不该导致Actions组件重新挂载。

问题根源分析 #

主组件MainPage在点击按钮时更新show状态，触发重新渲染。如果此时Actions组件的componentDidMount再次执行，说明React认为这个组件需要被卸载后重新挂载，而非仅仅更新。这种情况通常是因为React无法识别该组件的实例身份，常见原因包括：

• 组件没有固定的key标识，导致React在重新渲染时无法复用旧实例
• 父组件的DOM结构变化，间接导致Actions组件被意外卸载

解决方案 #

方案1：给Actions组件添加固定key

这是最简单的修复方式——给Actions组件指定一个固定的key，让React明确识别这是同一个组件实例，避免重复挂载：

// 在MainPage的render方法中修改：
<div className="topDescribtion">
  <h2>descr</h2>
  <Actions key="actions-data-component" /> {/* 添加固定key */}
</div>

React通过key来判断组件是否需要复用实例，固定的key会让React在主组件重新渲染时保留Actions的实例，不会触发componentDidMount。

方案2：将数据获取逻辑提升到父组件（推荐）

遵循React的数据流原则，把数据获取逻辑从子组件移到主组件MainPage中，再通过props把数据传递给Actions。这样数据只会在页面首次加载时获取一次，彻底避免重复请求：

修改MainPage代码：

import React from "react";
import Modal from '../components/modal/form'
import Actions from '../data/Actions'
const PATH_BASE = 'my URL which I give data in JSON format and it works fine';

class MainPage extends React.Component{
  constructor(){
    super();
    this.state = { 
      show: false,
      result: null // 新增存储数据的state
    };
    this.showModal = this.showModal.bind(this);
    this.setSearchTopStories = this.setSearchTopStories.bind(this);
  };

  setSearchTopStories(result) {
    this.setState({ result });
  };

  componentDidMount() {
    // 数据获取逻辑移到这里
    fetch(`${PATH_BASE}`)
      .then(response => response.json())
      .then(result => this.setSearchTopStories(result))
      .catch(error => console.error('数据请求失败：', error)); // 打印错误方便调试
  };

  showModal = e => {
    this.setState({ show: !this.state.show });
  };

  render(){
    return <div>
      <div className="topDescribtion">
        <h2>descr</h2>
        <Actions result={this.state.result} /> {/* 通过props传递数据 */}
      </div>
      <div className="btnNewTransaction">
        <button onClick={this.showModal}>show Modal</button>
        <Modal onClose={this.showModal} show={this.state.show}>
         Mdl--
        </Modal>
      </div>
      <div className="transactionList"></div>
    </div>
  }
}
export default MainPage;

修改Actions组件代码：

import React, { Component } from "react";

class Actions extends React.Component{
  render(){
    const { result } = this.props; // 从props接收数据
    console.log(result);
    return <div></div>;
  }
}
export default Actions;

方案3：临时规避——在Actions中判断是否已获取数据

如果暂时不想调整组件结构，可以在Actions的componentDidMount中添加判断，只有当数据为空时才发起请求：

componentDidMount() {
  // 仅当result为空时才请求数据
  if (!this.state.result) {
    fetch(`${PATH_BASE}`)
      .then(response => response.json())
      .then(result => this.setSearchTopStories(result))
      .catch(error => console.error('数据请求失败：', error));
  }
}

额外检查 #

建议你排查一下Modal组件的实现，确认它是否在显示/隐藏时修改了父组件的DOM结构（比如条件渲染导致父元素被移除/重建），这也可能间接导致Actions组件被意外卸载。如果Modal使用了React Portal实现，那通常不会有这个问题。

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