使动态反应选择组件，没有得到想要的结果，

Question

我想渲染一个动态选择/下拉菜单，我将从 api 获取它作为模板，我试图传递动态数据来反应选择语句，但仍然没有得到准确的响应。 我想显示 n 个从 api 接收的下拉列表。下拉列表的标签将作为问题，选项将作为答案。 有人可以帮我弄清楚什么是正确的方法。 下面是我的功能组件。 谢谢！

export const SurveyDropdown = () => {
  const [selectedSurvey, setselectedSurvey] = useState(); //default value

  function handleSelectChange(event) {
    setselectedSurvey(event.target.value);
  }
  console.log(selectedSurvey)
  const surveyData = [
    {
      id: 1,
      surveyQuestion: "Question One",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 2,
      surveyQuestion: "Question Two",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 3,
      surveyQuestion: "Question Three",
      type: "button",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
  ];

  let optionTemplate = surveyData.map(surveyData => (
    <option value={surveyData.option} key={surveyData.surveyQuestion}>{surveyData.option.values}</option>
  ));

  console.log(optionTemplate);

  return (
    <>
      <FloatingLabel
        controlId="floatingSelect"
        label="This is question"
        value={selectedSurvey}
        onChange={handleSelectChange}
      >
        <Form.Select aria-label="Floating label select example">
          <option>{optionTemplate}</option>
        </Form.Select>
      </FloatingLabel>
    </>
  );
};

Answer 1

您有多个调查问题，需要有2个组件。 SurveyDropdown用于一个问题。以及包含多个下拉 s的外部组件。

const {useState} = React;
const { FloatingLabel, Form } = ReactBootstrap;

const SurveyDropdown = (props) => {
 //default value
  const [selectedOption, setSelectedOption] = useState();
  function handleSelectChange(event) {
    setSelectedOption(event.target.value);
  }

  return (
    <React.Fragment>
      <FloatingLabel
        controlId="floatingSelect"
        label={props.surveyQuestion}
      >
        <Form.Select onChange={handleSelectChange}>
          {props.option.map(o =>
            <option key={o} value={o} selected={o==selectedOption}>{o}</option>
          )}
        </Form.Select>
      </FloatingLabel>
    </React.Fragment>
  );
};

const Survey = ({data}) => {
  return (
      <React.Fragment>
        {data.map(question =>
          <SurveyDropdown key={question.id} {...question} />
        )}
      </React.Fragment>
    );
}

const surveyData = [
    {
      id: 1,
      surveyQuestion: "Question One",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 2,
      surveyQuestion: "Question Two",
      type: "dropdown",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
    {
      id: 3,
      surveyQuestion: "Question Three",
      type: "button",
      option: ["optionOne", "optionTwo", "optionThree"],
    },
];

// Render it
ReactDOM.render(
  <Survey data={surveyData} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/2.2.2/react-bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="react"></div>