React setState 错误 -> 对象作为 React 子项无效

Question

我继续收到以下错误

Objects are not valid as a React child (found: object with keys {questionId, answer}). If you meant to render a collection of children, use an array instead.

我知道这是一个很常见的错误，但我似乎无法弄清楚。任何正确方向的帮助或指示都会很棒。

const [currentQuestion, setCurrentQuestion] = useState(0)    
const [selectedAnswer, setAnswer] = useState('')
const [savedAnswers, setSavedAnswers] = useState([])

const question = questions[currentQuestion]

const handleNextQuestion = () => {
    if(currentQuestion < questions.length - 1) {

        //create answer array item
        const answer = {questionId: question, answer: selectedAnswer};

        //add saved answer to array
        setSavedAnswers(savedAnswers => [...savedAnswers, answer])

        //go to next question
        setCurrentQuestion(currentQuestion + 1)

        //clear next answer
        setAnswer('')
    }
}
return (
    <div className="section">
        <div className="container">
            <div className={styles.surveyContainer}>
                <h2 className="title is-2 has-text-centered">Feel</h2>

                <Progress 
                    total = {questions.length}
                    current = {currentQuestion + 1}
                />
                <Question 
                    question = {question.question}
                />
                <Answers
                    answers = {question}
                    selected = {selectedAnswer}
                    handleClick = {handleClick}
                />
            </div>
            <button className="button is-primary" onClick={handleNextQuestion}>Next</button>

            {selectedAnswer}Selected Answers
            {savedAnswers}Saved Answers
        </div>
    </div>
)

Answer 1

您需要映射答案数组。使用 questionId 作为反应键。

savedAnswers.map(({ questionId, answer }) => (
  <div key={questionId}>{answer}</div>
));

Answer 2

const [currentQuestion, setCurrentQuestion] = useState(0]) 也定义这个

Answer 3

当您让 React 渲染对象而不是普通元素时，通常会发生此错误。

React setState 错误 -> 对象作为 React 子项无效

React setState error -> Objects are not valid as a React child

javascript

setstate

reactjs

react-hooks