React中如何在两个类组件间传递接口数据以展示结果

根据两个组件的层级关系，对应选择以下实现方式即可：

1. ResultPage是ImpactAnalysis的直接子组件（最简单场景） #

直接通过组件props传值即可，步骤如下：

• 首先在ImpactAnalysis类的构造函数中初始化状态，存储接口返回的结果和结果页展示标记：

constructor(props) {
  super(props);
  this.state = {
    analysisResult: [], // 存储数据库拉取的问卷匹配结果数组
    showResult: false // 控制结果页是否渲染
  }
  // 绑定方法this指向，避免触发时this报错
  this.getSelectedOptions = this.getSelectedOptions.bind(this);
}

• 修改按钮绑定的getSelectedOptions方法，拿到接口返回值后更新组件状态：

async getSelectedOptions() {
  // 保留你原有的请求数据库、匹配问卷答案的逻辑
  const matchResult = await /* 你的数据拉取逻辑，最终拿到对象数组格式的结果 */;
  this.setState({
    analysisResult: matchResult,
    showResult: true
  });
}

• 在ImpactAnalysis的render函数中修正原有按钮的语法错误，条件渲染ResultPage组件并传入数据：

render() {
  return (
    <>
      {/* 修正原代码onClick缺少左花括号的语法问题 */}
      <div className='row justify-content-end mt-3 pb-5'>
        <div 
          className='btn btn-primary btn-block rounded shadow-sm result' 
          onClick={this.getSelectedOptions}
        >
          Ergebnisanalyse
        </div>
      </div>
      {/* 数据拉取完成后再渲染结果页 */}
      {this.state.showResult && (
        <ResultPage resultData={this.state.analysisResult} />
      )}
    </>
  )
}

• 在ResultPage组件中，直接通过props读取传入的结果数据完成渲染即可：

class ResultPage extends React.Component {
  render() {
    const { resultData } = this.props;
    return (
      <div className="result-page">
        {resultData.map((item, index) => (
          <div key={item.id || index} className="result-card">
            {/* 按照你的业务需求渲染单条结果内容 */}
          </div>
        ))}
      </div>
    )
  }
}

2. 两个组件是平级/隔多层嵌套的兄弟组件 #

把共享的结果状态提升到两个组件最近的公共父组件中维护：

• 在公共父组件初始化state存储analysisResult，同时编写更新该state的方法
• 将更新方法作为props传给ImpactAnalysis组件，按钮触发拿到数据后，调用该方法把结果同步到父组件state
• 父组件再将存好的结果数据作为props传给ResultPage，后续传值逻辑和子组件场景完全一致

3. 组件嵌套层级过深、跨多模块 #

如果不想逐层传递props，可以用React内置的Context API实现跨层级传值，无需引入第三方依赖：

• 创建独立的结果上下文对象
• 用Context.Provider包裹两个组件所属的公共根节点，传入共享的结果state和更新方法
• ImpactAnalysis组件内消费上下文的更新方法，拉取数据后更新上下文值
• ResultPage组件内直接订阅上下文的结果值，拿到数据后完成渲染即可

踩坑提示：你贴出的原始按钮代码中onClick=this.getSelectedOptions存在语法错误，事件绑定需要用花括号包裹表达式，正确写法为onClick={this.getSelectedOptions}，同时不要忘记给类方法绑定this指向，否则触发时会找不到组件实例的setState方法。

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