javascript - react 中的单选按钮，忽略空值

Question

所以我正在使用我在互联网上找到的一个教程//mitchgavan.com/react-quiz/开发一个个性测验应用程序，我有一个用于 api 的 quizQuestions.js 文件，我可以在其中获取答案和问题来自，像这样

{
question: "I am task oriented in order to achieve certain goals",
answers: [
  {
    type: "Brown",
    content: "Hell Ya!"
  },
  {
    type: " ",
    content: "Nah"
  }
]
},

它有类型和内容，所以this is应用程序的初始状态，每次用户单击 Hell YA 按钮时，该类型都会增加 +1，例如 Brown: 1 等。但问题是，当用户选择 Nah 时，它会给我 this :null ，我有一个像这样的 AnswerOption.js 组件

 function AnswerOption(props) {
  return (
    <AnswerOptionLi>
      <Input
        checked={props.answerType === props.answer}
        id={props.answerType}
        value={props.answerType}
        disabled={props.answer}
        onChange={props.onAnswerSelected}
      />
      <Label className="radioCustomLabel" htmlFor={props.answerType}>
        {props.answerContent}
      </Label>
    </AnswerOptionLi>
  );
}


AnswerOption.PropTypes = {
  answerType: PropTypes.string.isRequired,
  answerContent: PropTypes.string.isRequired,
  answer: PropTypes.string.isRequired,
  onAnswerSelected: PropTypes.func.isRequired
};

我的 setUserAnswer 函数是这样的

setUserAnswer(answer) {
    const updatedAnswersCount = update(this.state.answersCount, {
      [answer]: {$apply: (currentValue) => currentValue + 1}
    });
    this.setState({
      answersCount: updatedAnswersCount,
      answer: answer
    });
}

我的问题是，我怎样才能让 React 忽略那个空白区域，所以当用户单击 Nah 时，它不会对它做任何事情，如果有不同的方法来解决这个问题，我会很乐意接受，在此先感谢。

Answer 1

解决问题的简单方法是检查答案是否为空:

if(answer.trim()) {

    const updatedAnswersCount = update(this.state.answersCount, {
        [answer]: {$apply: (currentValue) => currentValue + 1}
    });
    this.setState({
      answersCount: updatedAnswersCount,
      answer: answer
    });

}