React组件点击按钮无法展示getNewResult函数返回值的问题求助

嘿，我来帮你排查下这个问题！你的代码里的核心问题是普通变量result不会触发React的重新渲染。

当你点击按钮时，确实把getNewResult()的返回值赋值给了result，但React根本追踪不到这个普通变量的变化，所以组件不会重新渲染，自然就看不到更新后的结果啦。而初始时result是null，组件第一次渲染时能正确判断不显示内容，这就是为什么你说null的情况没问题。

要解决这个问题，我们需要用React的useState钩子来管理结果状态，因为状态变量的更新会触发组件重新渲染。修改后的代码如下：

import React, { useState } from 'react';

function ResultDisplayer({ getNewResult }){
  // 用useState创建状态变量，初始值为null
  const [result, setResult] = useState(null);

  function handleClick(){
    // 通过setResult更新状态，这会触发组件重新渲染
    setResult(getNewResult());
  }

  return (<div>
    <button id="button" onClick={handleClick}>Click</button>
    {result != null && <span id="result">{result}</span>}
  </div>);
}

export function Preview() {
  return <ResultDisplayer getNewResult={() => 'test'} />;
}

export default ResultDisplayer;

主要修改点说明：

• 新增导入useState钩子，这是React官方提供的用于管理组件内部状态的工具
• 把原来的普通result变量替换为useState返回的状态变量和对应的更新函数setResult
• 在handleClick函数中，调用setResult来更新结果值，这样React会感知到状态变化并重新渲染组件，你就能看到点击按钮后的结果了

备注：内容来源于stack exchange，提问作者hamza henni