Question

我收到此错误，我不明白为什么，但它对以下行不满意：

<p className="bold blue padding-left-30">{question}</p>

它不喜欢上段的{question}部分。

从：

const Questions = Component({
    render(){
        var questions = this.props.questions;
        questions = questions ? questions.map(
            (question) =>
                <div className="all-100 align-left">
                    <p className="bold blue padding-left-30">{question}</p>
                    <blockquote className="margin-left-50 medium fw-300">{question.answer ? question.answer : ""}</blockquote>
                </div>
        ): "";

        return(<div>{questions}</div>);
    }
});

这里是json的问题数组部分：

"questions": [
        {
          "question": "This is Question 1",
          "answer": [
            "blah blah blah 1"
          ]
        },
        {
          "question": "This is Question 2",
          "answer": [
            "blah blah blah 2"
          ]
        },
        {
          "question": "This is Question 3",
          "answer": [
            "blah blah blah 3"
          ]
        }
      ]

答案打印得很好但是由另一个名为<Answer />的反应组件完成。

那是什么意思？在我的情况下不变违规？

Answer 1

此时问题是一个对象，因为您在其上进行映射，并且您正试图在JSX中使用它，这是不允许的。你的意思是

<p className="bold blue padding-left-30">{question.question}</p>

Answer 2

您正在传递p标签中的完整问题对象

<p className="bold blue padding-left-30">{question.question}</p>

未捕获的不变违规：对象无效作为React子级

2 个答案: