我一直试图把我的问题分成"页面"；为了呈现不同的输入组，在第一个问题和第二个问题之间，它是有效的。但从第二个问题到第三个问题，我犯了一个错误。
一个眼睛更明亮的人能看到哪里出了问题吗？
我是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
您的QuestionStageArtRadio语法错误，您有函数哪个返回函数哪个返回组件。
删除更改此项的括号：
const QuestionStageArtRadio = () => ({ /* props */ }) => <div/>
进入这个：
const QuestionStageArtRadio = ({ /* props */ }) => <div/>