表单中的下一步不呈现

Question

我一直在尝试将我的问题分成“页面”以呈现不同的输入组，在第一个问题和第二个问题之间。但是从第二个问题到第三个问题我得到了一个错误。

眼光比较新的人能看出哪里出了问题吗？

我是 React 的新手，刚开始学习并假设我错过了一两件事。

ERROR: ----> index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. in QuestionStageArtRadio (at Form.js:86) in div (at Form.js:85) in form (at Form.js:60) in section (at Form.js:58) in Form (at App.js:11) in main (at App.js:10) in App (at src/index.js:6) 

CODE

Form.js
---------------------------------------------------------------------------------------------------------
const Form = () => {
  const [page, setPage] = useState(0)
  const [showSummary, setShowSummary] = useState(false)
  const [inhabitants, setInhabitants] = useState('') 
  const [ageCategory, setAgeCategory] = useState('') 
  const [stageArtCategory, setStageArtCategory] = useState('')

const onPageChange = (pagenumber) => {
    setPage(pagenumber)
  }

const handleSubmit = (event) => {
    event.preventDefault();
    setShowSummary(true)
  }

return (
    <section className="form-container">
      {!showSummary ? (
        <form onSubmit={handleSubmit}>

        {page === 0 && ( 
            <div>
            <QuestionCitySelect
              inhabitants={inhabitants}
              setInhabitants={setInhabitants}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

        {page === 1 && (
            <div>
            <QuestionAgeRadio
              ageCategory={ageCategory}
              setAgeCategory={setAgeCategory}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

        {page === 2 && (
            <div>
            <QuestionStageArtRadio
              stageArtCategory={stageArtCategory}
              setStageArtCategory={setStageArtCategory}
              page={page}
              setPage={onPageChange}
            />
            </div>
        )}

..and so forth.....
----------------------------------------------------------------------------------
QuestionStageArtRadio (the third question)
----------------------------------------------------------------------------------
import React from 'react'

import NextQuestionButton from './NextQuestionButton'

const QuestionStageArtRadio = () => ({
  stageArtCategory,
  setStageArtCategory,
  page,
  setPage,
  onNextQuestion,
  message
}) => {
  const onStageArtChange = (e) => {
    setStageArtCategory(e.target.value)
  }

  const stageart = ["I'm for experimental shit, I need to see something I can not immediately understand", "I want to dance with my kid", "Opera", "Theatre", "Musical", "I just miss the feeling of collectivity, and long to be able to see something with another person's eye - just once, please!", "Concert"]

  return (
    <article className="form-question">
      {/* Question */}
      <p htmlFor="stage" className="form-question" tabIndex="0">
        What kind of stage art would you like too experience post Covid-19?
      </p>

      {/* Answer */}
      <div className="question-content-container">
        {stageart.map((stagetype) => (
          <span key={stagetype} className="form-radiobuttons">
            <input
              name="stagetype"
              id={stagetype}
              type="radio"
              onChange={onStageArtChange}
              //checked={stageArtCategory === category}
              className="form-radiobuttons"
            />
            <label htmlFor={stagetype} aria-label={stagetype} tabIndex="0">
              <span className="form-radiobutton-input">{stagetype}</span>
            </label>
          </span>
        ))}
      </div>
      <div className="buttons-container">
        <NextQuestionButton
          page={page}
          setPage={setPage}
          currentState={stageArtCategory}
          defaultState=""
          message="Please choose what kind of stage art you would like to experience"
          onClick={onNextQuestion}
        />
      </div>
    </article>
  )
}

export default QuestionStageArtRadio

----------------------------------------------------------------------------------
NextQuestionButton.js
----------------------------------------------------------------------------------
import React from 'react'

const NextQuestionButton = ({
  page,
  setPage,
  message
}) => {
  const onNextQuestion = () => setPage(page +1)

  return (
    <>
      <button
        type="button"
        aria-label="button to the next question"
        className="next-button"
        onClick={onNextQuestion}
        message={message}
      >
        Next question
      </button>
    </>
  )
}
export default NextQuestionButton

Answer 1

您的 QuestionStageArtRadio 语法错误，您有 return 功能 return 组件的功能。

删除括号更改：

const QuestionStageArtRadio = () => ({ /* props */ }) => <div/>

进入这个：

const QuestionStageArtRadio = ({ /* props */ }) => <div/>

表单中的下一步不呈现

Next step in form does not render

reactjs

react-hooks

use-state