獲取數組中選中項的ID

Question

我有一個 reactJs 手風琴，其中我顯示問題和答案（常見問題解答），每個問題可能有多個答案，數據是從 api 和 axios 中獲取的，我有兩個 forms 來發布問題和答案，問題的形式按我想要的方式工作，但答案的形式沒有，問題是我需要所選問題的 ID，所以我可以將它作為參數傳遞給 axios 中的 url（'https://api.com/answers?question_id='+param.question_id ) 這樣我就可以在正確的問題中發布答案。 在每個問題中我都有一個按鈕回答這個問題點擊應該得到問題 ID 這樣我就可以將它添加到 state

我在 App.js 中有這個 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
      },
    };
  }

  handleSentData = (dataQ) => {
    this.sendData(dataQ);
  }

  sendData = (formData) => {
    let newData = { ...this.state };

    newData.params = {
      client_id: this.props.client,
      question_id: this.state.theQuestion,
      name : formData.name,
      email : formData.email,
      subject : formData.answer
    };

    Api.answerQ(newData.params)
      .then((response) => {
        if (response.data.status === "success") {
          return response.data.data;
        }
        this.setState({
          questions: [...response.data.questions.items],
          question_id: response.data.questions.items.id
        });
      });
  };
}

export default App;

在 App.js 中，我將方法handleSentData傳遞給子組件AccordionItem ，其中我 map 項目和data.id返回 Id

this.state.questions.map((data, index) => (
    <AccordionItem key={index} index={data.id} QST={this.handleQuestionId}/>
))

我在 AccordionItem 組件中有這個方法，每次我單擊一個項目時，我都會得到該項目的 ID，然后將props.QST(index)傳遞給父 App.js

const eventHandler = (e, index) => {
    e.preventDefault();
    setActive(index);
    props.QST(index)
}

我需要將 question_id 的 state 添加到 newData.params，這樣我就可以將它作為參數傳遞給 url

Answer 1

查看您的代碼，我看不到您在哪里 go 並呈現問題的數組。 但最實用的方法是，當你在數組上應用 map 時，你會獲得問題的 id 並將其傳遞給必要的組件，在這種情況下我猜它會是答案按鈕。 你在 handleSentData function 中添加了這個新參數。我不確定，因為我有點困惑，我不清楚你的代碼是否有效，或者它是你想要實現的草圖。

我舉了一個小例子，也許它可以為您提供指導：

import React, { useState } from "react";

const questions = [
  { id: 1, text: "What is 2 plus 2?" },
  { id: 2, text: "What is 10 plus 10?" }
];

const answers = [
  { id: 1, text: "It is 4" },
  { id: 2, text: "It is 8" }
];

const fetchAnswer = (questionId) => {
  const answer = answers.find((answer) => answer.id === questionId);
  return answer ? answer.text : "I don't really know";
};

const Questions = (props) => {
  const { questions, handleSentData } = props;

  return (
    <ul>
      {questions.map((question) => {
        return (
          <li key={question.id}>
            <span>{question.text}</span>
            <button onClick={() => handleSentData(question.id)}>
              Answer this question
            </button>
          </li>
        );
      })}
    </ul>
  );
};

export default function App() {
  const [answer, setAnswer] = useState(null);

  const handleSentData = (questionId) => {
    // Fetch answers from somewhere using the question id.
    const response = fetchAnswer(questionId);
    console.log(response);
    setAnswer(response);
  };

  return (
    <div className="App">
      <h1>Questions</h1>
      <Questions questions={questions} handleSentData={handleSentData} />
      <h1>Answer</h1>
      <div>{answer ? answer.text : "Your answer will appear here!"}</div>
    </div>
  );
}