Question

我知道这是一个重复的问题，但我很抱歉，我找不到答案。我正在尝试将数据导入React / Redux Quiz组件，但我收到了错误

未捕获错误：对象作为React子对象无效（找到：对象用键{answer，text}）。如果你想渲染一个集合 children，使用数组代替或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法 Quiz。

这是我的数据文件：

export const exampleQuestions = [
  {
    Question: 1,
    type: 'example',
    set: 1,
    text: 'Which one is true?',
    answers:
    [
      {
        answer: 'A',
        text: 'sometext',
      },
      {
        answer: 'B',
        text: 'sometext',
      },
      {
        answer: 'C',
        text: 'Neither of the above'
      }
    ]
  },
  {
    Question: 2,
    type: 'example',
    set: 1,
    text: 'Which one is true?',
    answers:
    [
      {
        answer: 'A',
        text: 'Sometext',
      },
      {
        answer: 'B',
        text: 'sometext',
      },
      {
        answer: 'C',
        text: 'Neither of the above'
      }
    ]
  },
  {
    Question: 3,
    type: 'example',
    set: 1,
    text: 'Which one is true?',
    answers:
    [
      {
        Answer: 'A',
        text: 'Sometext',
      },
      {
        Answer: 'B',
        text: 'sometext',
      },
      {
        Answer: 'C',
        text: 'Neither of the above'
      }
    ]
  },
  {
    Question: 4,
    type: 'example',
    set: 1,
    text: 'Which one is true?',
    answers:
    [
      {
        Answer: 'A',
        text: 'sometext',
      },
      {
        Answer: 'B',
        text: 'sometext'
      },
      {
        Answer: 'C',
        text: 'Neither of the above'
      }
    ]
  }
]

这是我的Quiz组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { chunk, now } from '../utils'

class Quiz extends Component {
  constructor(props) {
    super(props)
    this.state = {
      answers: new Array(this.props.question).fill('e'),
      chosenAnswers: []
    }
  }

  onAnswerSelected() {
    let answers = [this.state.answers]
    answers[qindex] = String.fromCharCode(97 + i)
    this.setState({ ...state,answers })

  }

  render() {
    const { set, enterAnswers, id, timed, questions } = this.props
    console.log(questions);
    const { qindex, text, answers } = questions

    return (
      <div>
          <div key={qindex}>
            <h4>{text}</h4>
            {answers.map((a, i) => (
              <label key={i} style={{ display: 'block' }}>
                <input
                  type="radio"
                  id={`${qindex}_${i}`}
                  checked={
                    this.state.answers[qindex] === String.fromCharCode(97 + i)
                  }
                  onChange={this.onAnswerSelected.bind}
                  value={String.fromCharCode(97 + i)}
                />
                &nbsp;{a}
              </label>
            ))}
          </div>
        <div
          className="button"
          onClick={() => enterAnswers(id, this.state.selected, now())}
          style={{
            border: '1px solid black',
            backgroundColor: 'purple',
            display: 'inline-block',
            color: 'white',
            padding: 10
          }}
        >
          Save answers
        </div>
      </div>
    )
  }
}

Quiz.propTypes = {
  set: PropTypes.array,
  enterAnswers: PropTypes.func,
  id: PropTypes.number,
  timed: PropTypes.number
}

export default Quiz

我做错了什么？

Answer 1

您正尝试在代码的这一部分呈现对象a：

answers.map((a, i) => (
              <label key={i} style={{ display: 'block' }}>
                <input
                  type="radio"
                  id={`${qindex}_${i}`}
                  checked={
                    this.state.answers[qindex] === String.fromCharCode(97 + i)
                  }
                  onChange={this.onAnswerSelected.bind}
                  value={String.fromCharCode(97 + i)}
                />
                &nbsp;{a}   <----- the erroneous part
              </label>
        ))

正如错误说明所述，对象无法如此呈现。该对象包含answer和text字段。您应该单独渲染每个属性，而不是渲染对象本身。例如，你可以这样做：

answers.map((a, i) => (
              <label key={i} style={{ display: 'block' }}>
                <input
                  type="radio"
                  id={`${qindex}_${i}`}
                  checked={
                    this.state.answers[qindex] === String.fromCharCode(97 + i)
                  }
                  onChange={this.onAnswerSelected.bind}
                  value={String.fromCharCode(97 + i)}
                />
                <div>{a.answer}, {a.text}</div>
              </label>
        ))

Answer 2

尝试将answers.map分配给返回之外的变量。

Answer 3

试试这个，我希望这会奏效。

render() {
    const { set, enterAnswers, id, timed, questions } = this.props
    console.log(questions);
    const { qindex, text, answers } = questions

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

questions() {
 return questions.map((question) =>{
    return (
       <div key={question.Question}>
            <h4>{question.text}</h4>
            { this.answer(question.answers) }
        </div>
        <div
            className="button"
            onClick={() => enterAnswers(id, this.state.selected, now())}
            style={{
                border: '1px solid black',
                backgroundColor: 'purple',
                display: 'inline-block',
                color: 'white',
                 padding: 10
            }}
            >
             Save answers
        </div>
    );
 });
}

answer(answer) {
   return answer.map((a, i) =>{
     return (
        <label key={i} style={{ display: 'block' }}>
        <input
          type="radio"
          id={`${qindex}_${i}`}
          checked={
            this.state.answers[qindex] === String.fromCharCode(97 + i)
          }
          onChange={this.onAnswerSelected.bind}
          value={String.fromCharCode(97 + i)}
        />
        &nbsp;{a.text}
       </label>
     );
   });


}

React JS Child对象未显示为有效

3 个答案: