ReactJS手风琴组件获取选中问题ID以提交回答的实现问题

1. 补全App组件缺失的ID接收方法 #

你给子组件传递了QST={this.handleQuestionId}回调，但当前App类中没有定义该方法，首先添加该方法接收子组件回传的问题ID，并存入state，同时修复原构造函数的语法错误：

class App extends Component {
  constructor(props) {
    super(props);
    this.conteneur = React.createRef();
    this.state = {
      questions: [],
      // 原代码这里漏了逗号，已补上
      question_id: null,
      params: {
        client_id: null,
        question_id: null
      },
    };
  }

  // 新增这个回调方法，接收子组件传回来的问题ID
  handleQuestionId = (selectedQuestionId) => {
    this.setState({
      question_id: selectedQuestionId,
      // 可同步更新params下的question_id，保持状态统一
      params: {
        ...this.state.params,
        question_id: selectedQuestionId
      }
    })
  }

  // 原有其他方法保持不变
}

2. 修正提交方法的参数取值错误 #

你原有sendData方法中错误使用了不存在的this.state.theQuestion取值，直接读取已经存在state里的question_id即可，同时增加空值校验避免无效提交：

sendData = (formData) => {
  // 空校验：未选中问题时拦截提交
  if (!this.state.question_id) {
    alert("请先选择要回答的问题");
    return;
  }

  const newParams = {
    client_id: this.props.client,
    question_id: this.state.question_id,
    name: formData.name,
    email: formData.email,
    subject: formData.answer
  };

  Api.answerQ(newParams)
    .then((response) => {
      if (response.data.status === "success") {
        this.setState({
          questions: [...response.data.questions.items],
          // 提交成功后清空选中的问题ID，重置状态
          question_id: null
        });
        return response.data.data;
      }
    });
};

可选：如果接口要求question_id必须拼接在URL上 #

如果你的Api.answerQ封装逻辑没有自动把参数拼到请求URL，需要手动拼接的话，修改请求调用部分即可：

// 手动拼接question_id到URL
Api.answerQ(`https://api.com/answers?question_id=${this.state.question_id}`, newParams)

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