Javascript 在React中生成调查，并在尝试实现问题呈现约束时出错

在React中构建调查，并根据以前的答案向问题（下一个问题是什么）添加约束，但尝试实现这些约束让我陷入了错误

当我运行程序时，它在QuestionComponent中给了我一个错误，试图呈现{question}-'对象作为子对象无效'

const questionArray = [
  {
    question: "how old are you?",
    answers: [
      "younger than 15",
      "between 15 and 20",
      "older than 20",
    ],
    questionId: 1,
  },
  {
    question: "are you a student?",
    answers: ["yes", "no"],
    questionId: 2,
    condition: ( answers ) => answers[1] !== 'Yes'
  },
  {
    question: "where do you live",
    answers: ["QLD", "NSW", "VIC", "ACT", "NT", "TAS", "WA"],
    questionId: 3,
  },
];
export default questionArray;

______________________________________________________________________________

const QuestionComponent = ({ question, answer, onSelect }) => {
  const { questions, answers } = question;
  return (
    <div>
      {question}
      {answers.map((text, index) => (
        <button
          key={index}
          onClick={() => {
            onSelect(text);
          }}
        >
          {text}
        </button>
      ))}
    </div>
  );
};
export default QuestionComponent;

______________________________________________________________________________

import questionArray from ''
import QuestionComponent from ''

class SurveyPage extends Component {
      state = {
          answers: {}
      };

      render() { 
        const questions = questionBank.filter(q => {
            if (!q.condition) {
                return true;
            }
            return q.condition( this.state.answers );
        });   
        return (
           <div>
             {questions.map(question => (
                        <QuestionBox
                            question={question}
                            answer={this.state.answers[question.questionId]}
                            key={question.questionId}
                            onSelect={answer => {
                                const answers = {
                                    ...this.state.answers,
                                    [question.questionId]: answer,
                                };
                                this.setState({ answers });
                            }}
                        />
                    ))}
           </div>
        )
       }
}

const questionArray=[
{
问题：“你多大了？”，
答复:[
“15岁以下”，
“15至20岁之间”，
“20岁以上”，
],
问题一:1,，
},
{
问题：“你是学生吗？”，
答案：[“是”、“否”]，
问题二,，
条件：（答案）=>答案[1]！==“是”
},
{
问题：“你住在哪里”，
答案：[“昆士兰”、“新南威尔士州”、“维克”、“ACT”、“NT”、“TA”、“WA”]，
问题三,，
},
];
导出默认数组；
______________________________________________________________________________
const QuestionComponent=（{question，answer，onSelect}）=>{
常量{问题，答案}=问题；
返回(
{问题}
{answers.map（（文本，索引）=>(
{
onSelect（文本）；
}}
>
{text}
))}
);
};
导出默认组件；
______________________________________________________________________________
从“”导入问题数组
从“”导入组件
类SurveyPage扩展组件{
状态={
答案：{}
};
render（）{
const questions=questionBank.filter（q=>{
如果（！q.条件）{
返回true；
}
返回q.condition（this.state.answers）；
});   
返回(
{questions.map（问题=>(
{
常数答案={
…这个州的答案，
[问题.问题ID]：回答，
};
this.setState（{answers}）；
}}
/>
))}
)
}
}

我认为您应该将

问题arr

传递给您的调查组件，然后依次循环传递调查组件中的问题arr，然后将当前问题传递给您的问题组件。

“介于15和20之间”不包括15和20。这可能会导致错误的选择和数据倾斜。我想你的意思是说“包容”。const{questions，answers}=question；这是一个物体。你直接将问题对象传递到内部，所以我已经解决了渲染对象的初始问题，现在我认为最后一个问题是在问题数组中。我在其中一个问题中得到了一个条件，但它给我的错误（destructured parameter）是未定义的，它表示条件：（{answers}）=>answers[1]=='Yes'。我的答案存储在“SurveyPage”上的状态中，因此问题对象中的条件是否可能存在？