React使用Material-UI开发表单时Questionnaire组件filter报错优化求助

核心错误原因 #

1. 组件传参不匹配：Content组件调用Questionnaire时将参数封装在questionnaireProps属性中，但Questionnaire组件直接从顶层props解构answers和setAnswers，导致拿到undefined，调用filter方法时报错
2. 问题数组引用错误：Questionnaire组件内使用Questionnaire[i]读取问题文本，实际是引用了组件自身而非定义的问题列表
3. 无容错机制：未对传入的props做合法性校验，报错直接抛出原生错误，用户无法感知问题所在

修复步骤 #

第一步：修正组件传参逻辑 #

修改src/components/contents.js中的StepContent组件与调用逻辑：

// StepContent组件修改，接收questionnaireProps并正确传递给Questionnaire
const StepContent = ({ stepIndex, questionnaireProps }) => {
  switch (stepIndex) {
    case 0:
      return <Basic />;
    case 1:
      // 展开参数+传入问题数组
      return <Questionnaire {...questionnaireProps} questions={QUESTIONS} />;
    case 2:
      return <Optional />;
    case 3:
      return <Confirm />;
    default:
      return "Unknown stepIndex";
  }
};

// 保持原有StepContent调用逻辑不变，已经正确传递了questionnaireProps
<StepContent stepIndex={activeStep} questionnaireProps={{ answers, setAnswers }} />

第二步：优化Questionnaire组件，增加容错与友好提示 #

import React from "react";
import Typography from "@mui/material/Typography";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import Alert from "@mui/material/Alert";

const Questionnaire = ({ answers = [], setAnswers, questions = [] }) => {
  // 参数异常时展示用户友好提示，而非直接抛出代码错误
  if (!Array.isArray(answers) || typeof setAnswers !== 'function' || !questions.length) {
    return <Alert severity="error">表单加载异常，请刷新页面重试</Alert>
  }

  const handleAnswer = (answeredIndex, answer) => {
    setAnswers(answers.map((e, i) => (i === answeredIndex ? answer : e)));
  };
  return (
    <div>
      <FormControl component="fieldset">
        {answers
          .filter((_, i) => i === 0 || answers[i - 1])
          .map((answer, i) => (
            <React.Fragment key={i}>
              {/* 修正问题引用为传入的questions数组 */}
              <FormLabel component="legend">{questions[i]}</FormLabel>
              {answer ? (
                <Typography>{answer === "yes" ? "はい" : "いいえ"}</Typography>
              ) : (
                <RadioGroup
                  row
                  aria-label="questionnaire"
                  name={`question-${i}`}
                  onChange={(_evt, value) => {
                    handleAnswer(i, value);
                  }}
                >
                  <FormControlLabel value="yes" control={<Radio />} label="はい" />
                  <FormControlLabel value="no" control={<Radio />} label="いいえ" />
                </RadioGroup>
              )}
            </React.Fragment>
          ))}
      </FormControl>
    </div>
  );
};

export default Questionnaire;

可选开发辅助优化 #

如果需要在开发阶段快速定位参数类问题，可以增加props类型校验：

import PropTypes from 'prop-types';

Questionnaire.propTypes = {
  answers: PropTypes.array.isRequired,
  setAnswers: PropTypes.func.isRequired,
  questions: PropTypes.arrayOf(PropTypes.string).isRequired
};

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