如何在其他组件触发时调用React的useEffect钩子？

我在React函数组件里用useEffect做异步数据获取，处理后用<h2>展示数据。现在想在App.js里按下回车键时触发这个数据获取操作。我已经写了回车处理函数，会调用setHeadingText修改App.js里的状态，本以为能触发重渲染进而执行另一个组件的useEffect，但没生效。请问按下回车键后触发其他组件中useEffect的最优方法是什么？

附当前回车处理函数代码：

function handleKeyDown(event){
  if(event.key === 'Enter'){
    // setHeadingText是App.js里的useState方法，本想触发重渲染
    setHeadingText(name);
  }
}

方法1：状态提升+依赖监听（最直接常用） #

核心思路是把触发数据获取的专属状态提升到App.js，传递给目标组件后，让目标组件的useEffect监听该状态变化，从而触发异步请求（避免复用业务状态导致逻辑混淆）。

步骤：

1. 在App.js中新增触发状态（比如fetchTrigger，用数字自增或布尔值切换实现状态变化）。
2. 回车事件触发时，更新fetchTrigger状态。
3. 目标组件接收fetchTrigger，将其加入useEffect依赖项，状态变化时执行数据请求。

代码示例：

• App.js：

import { useState } from 'react';
import DataDisplay from './DataDisplay';

function App() {
  const [fetchTrigger, setFetchTrigger] = useState(0);
  const [name, setName] = useState('');

  function handleKeyDown(event) {
    if (event.key === 'Enter') {
      // 通过更新触发状态，通知子组件执行请求
      setFetchTrigger(prev => prev + 1);
    }
  }

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        onKeyDown={handleKeyDown} 
      />
      <DataDisplay fetchTrigger={fetchTrigger} name={name} />
    </div>
  );
}

• 目标组件（DataDisplay.js）：

import { useState, useEffect } from 'react';

function DataDisplay({ fetchTrigger, name }) {
  const [headingText, setHeadingText] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 替换为你的实际请求逻辑
        const response = await fetch(`https://api.example.com/data?name=${name}`);
        const data = await response.json();
        setHeadingText(data.processedText);
      } catch (error) {
        console.error('数据获取失败:', error);
      }
    };

    fetchData();
  }, [fetchTrigger, name]); // 监听触发状态和请求参数

  return <h2>{headingText}</h2>;
}

export default DataDisplay;

方法2：Context API（适合组件层级较深场景） #

如果组件嵌套层级多，传递props太繁琐，可以用Context共享触发状态或回调，让目标组件订阅Context变化。

代码示例：

• 先创建Context：

// FetchContext.js
import { createContext, useContext, useState } from 'react';

const FetchContext = createContext();

export function FetchProvider({ children }) {
  const [fetchTrigger, setFetchTrigger] = useState(0);

  const triggerFetch = () => {
    setFetchTrigger(prev => prev + 1);
  };

  return (
    <FetchContext.Provider value={{ fetchTrigger, triggerFetch }}>
      {children}
    </FetchContext.Provider>
  );
}

export function useFetch() {
  return useContext(FetchContext);
}

• App.js：

import { useState } from 'react';
import { useFetch } from './FetchContext';
import DataDisplay from './DataDisplay';

function App() {
  const [name, setName] = useState('');
  const { triggerFetch } = useFetch();

  function handleKeyDown(event) {
    if (event.key === 'Enter') {
      triggerFetch();
    }
  }

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        onKeyDown={handleKeyDown} 
      />
      <DataDisplay name={name} />
    </div>
  );
}

// 在根组件包裹Provider
export default function Root() {
  return (
    <FetchProvider>
      <App />
    </FetchProvider>
  );
}

• 目标组件：

import { useState, useEffect } from 'react';
import { useFetch } from './FetchContext';

function DataDisplay({ name }) {
  const [headingText, setHeadingText] = useState('');
  const { fetchTrigger } = useFetch();

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data?name=${name}`);
      const data = await response.json();
      setHeadingText(data.processedText);
    };

    fetchData();
  }, [fetchTrigger, name]);

  return <h2>{headingText}</h2>;
}

export default DataDisplay;

方法3：回调函数（适合简单单次触发场景） #

如果目标组件不需要复用，可在App.js定义数据获取回调，传递给目标组件，回车事件触发时直接调用回调更新目标组件状态。

代码示例：

• App.js：

import { useState } from 'react';
import DataDisplay from './DataDisplay';

function App() {
  const [name, setName] = useState('');

  const fetchData = async () => {
    try {
      const response = await fetch(`https://api.example.com/data?name=${name}`);
      const data = await response.json();
      return data.processedText;
    } catch (error) {
      console.error('数据获取失败:', error);
      return '';
    }
  };

  function handleKeyDown(event) {
    if (event.key === 'Enter') {
      fetchData().then(text => {
        // 可通过props传递给子组件更新状态
        // 或结合useImperativeHandle让子组件暴露更新方法
      });
    }
  }

  return (
    <div>
      <input 
        type="text" 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        onKeyDown={handleKeyDown} 
      />
      <DataDisplay fetchData={fetchData} />
    </div>
  );
}

总结 #

• 组件层级浅、逻辑简单：优先用状态提升+依赖监听，直观易维护。
• 组件层级深：用Context API避免props层层传递。
• 单次触发场景：可选回调函数，但状态提升仍是通用方案。

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