如何在不使用state或全局变量的情况下传递componentDidMount数据至子组件

其实你担心的“数据与App组件无关”完全不是问题——我们只是用state临时存一下获取到的数据，用来触发组件重渲染并传递给子组件，这是React处理异步数据渲染的标准做法，不会给App组件带来额外的耦合。

类组件实现方式 #

class App extends React.Component {
  // 初始化state，明确这是给Node组件准备的数据
  state = {
    nodeData: null
  };

  componentDidMount() {
    // 这里替换成你的实际数据请求逻辑
    fetch('/your-api-endpoint')
      .then(response => response.json())
      .then(fetchedData => {
        // 数据获取完成后更新state，触发组件重渲染
        this.setState({ nodeData: fetchedData });
      })
      .catch(error => {
        console.error('数据获取失败:', error);
      });
  }

  render() {
    // 数据未加载完成时可以显示加载提示
    if (!this.state.nodeData) {
      return <div>Loading...</div>;
    }

    // 数据就绪后传递给Node组件
    return <Node value={this.state.nodeData} />;
  }
}

函数组件实现方式（更简洁，推荐） #

如果你已经在使用React Hooks，用useState和useEffect会更清爽：

import React, { useState, useEffect } from 'react';

function App() {
  const [nodeData, setNodeData] = useState(null);

  // 模拟componentDidMount的生命周期，仅在组件挂载时请求数据
  useEffect(() => {
    fetch('/your-api-endpoint')
      .then(response => response.json())
      .then(fetchedData => setNodeData(fetchedData))
      .catch(error => console.error('数据获取失败:', error));
  }, []);

  if (!nodeData) {
    return <div>Loading...</div>;
  }

  return <Node value={nodeData} />;
}

为什么不能不用state？ #

你可能会想：能不能直接把获取到的数据存在某个变量里，然后在render里用？但这种方式行不通——因为React组件只有在state或props变化时才会触发重渲染。异步获取数据的操作在组件挂载后才完成，这时如果不用setState通知React数据更新，组件不会重新渲染，Node组件也就拿不到最新的数据。

至于你提到的全局变量，确实没必要用，因为数据只需要在App组件和子组件之间传递，用state完全足够，还能保证组件的状态可控。

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