如何在点击按钮时正确重新调用React子组件？

你遇到的核心问题是Child组件挂载后，内部自有函数没有在点击Load按钮或props更新时重新执行。以下是几种实用的解决思路：

方案1：通过key强制组件重新挂载 #

React会根据组件的key值判断是否需要重新创建组件实例。点击Load按钮时更新key，就能让Child组件完全卸载后重新挂载，内部的初始化逻辑（包括自有函数）会重新执行。

修改Parent组件代码：

const [animals, setAnimals] = useState([]);
const [showResults, setShowResults] = useState(false);
const [childKey, setChildKey] = useState(0); // 新增key状态
        
function Load() {
  setShowResults(true);
  setChildKey(prev => prev + 1); // 更新key，强制Child重新挂载
}

return (
  <>
    <button onClick={Load}> Load Info </button>
    {showResults && <Child key={childKey} arr={animals} />}
  </>
)

方案2：在Child组件中用useEffect监听依赖触发函数 #

如果Child是函数组件，把内部自有函数放在useEffect里，指定依赖项（比如传入的arr或者控制显示的showResults），这样当依赖变化时，函数会自动重新执行。

示例Child组件代码：

function Child({ arr }) {
  // 自有函数
  const handleData = () => {
    // 你的业务逻辑
    console.log('处理数据:', arr);
  };

  // 监听arr变化，触发函数
  useEffect(() => {
    handleData();
  }, [arr]); // 依赖arr，当arr更新时重新执行

  return <div>Child组件内容</div>;
}

如果需要点击Load按钮时强制触发一次，还可以把showResults也加入依赖：

useEffect(() => {
  if (showResults) { // 确保显示时才执行
    handleData();
  }
}, [arr, showResults]);

方案3：通过props传递触发信号 #

在Parent组件中新增一个触发状态，点击Load时更新这个状态，Child组件监听该状态变化执行自有函数。

Parent组件修改：

const [trigger, setTrigger] = useState(0);

function Load() {
  setShowResults(true);
  setTrigger(prev => prev + 1); // 更新触发信号
}

return (
  <>
    <button onClick={Load}> Load Info </button>
    {showResults && <Child arr={animals} trigger={trigger} />}
  </>
)

Child组件中监听：

useEffect(() => {
  handleData();
}, [trigger, arr]);

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