Javascript 从子级调用函数以更改父级状态时出错

我试图在子组件中单击按钮后将父组件的状态更改为其他状态。问题是，当我单击按钮时，我得到错误警告：无法在呈现不同组件（

quick

）时更新组件（

App

）。在

quick

• E基本上，我想做的是有几个按钮，上面有语句。单击按钮时，按钮上的语句将传递给父状态，在本例中，父状态为选项[1-4]和答案[1-4]。

我的App.js

import React, { useState } from 'react';
import './App.css';
//import components
import Quiz from './components/Quiz'

function App() {
  //states
  const [question, setQuestion] = useState("Ready to start?");

  //what question we are on
  const [counter, setCounter] = useState(0);

  //buttons that display the available answers to choose from 
  const [choice1, setchoice1] = useState("choice1");
  const [choice2, setchoice2] = useState("choice2");
  const [choice3, setchoice3] = useState("choice3");
  const [choice4, setchoice4] = useState("choice4");

  // final answer for each question
  const [answer1, setAnswer1] = useState("")
  const [answer2, setAnswer2] = useState("")
  const [answer3, setAnswer3] = useState("")
  const [answer4, setAnswer4] = useState("")



  const nextQuestion = () => {
    if (counter === 0) {
      setQuestion((prev) => "question 1")
    } else if (counter === 1) {
      setQuestion((prev) => "question 2")
    } else if (counter === 2) {
      setQuestion((prev) => "question 3")
    } else if (counter === 3) {
      setQuestion((prev) => "question 4")
    } else if (counter === 4) {
      setQuestion((prev) => "question 5")
    } else {
      setQuestion((prev) => "complete")
    }

  }

  const finalAnswer = (param) => {
    if (counter === 1) {
      setAnswer1(param);
    } else if (counter === 2) {
      setAnswer2(param);
    } else if (counter === 3) {
      setAnswer3(param);
    } else if (counter === 4) {
      setAnswer4(param);
    } 

  }


  const incrementer = () => {
    setCounter((prev) => prev + 1);
    console.log(counter);
    nextQuestion();
  }

  return (
    <div className="App">
      <Quiz question={question} counter={incrementer}
        nextQuestion={nextQuestion} choice1={choice1}
        choice2={choice2} choice3={choice3} choice4={choice4} finalAnswer={finalAnswer} />

    </div>
  );
}

export default App;

import React，{useState}来自“React”；
导入“/App.css”；
//导入组件
从“./组件/测验”导入测验
函数App（）{
//州
const[question，setQuestion]=useState（“准备好开始了吗？”）；
//我们的问题是什么
const[counter，setCounter]=useState（0）；
//显示可供选择的可用答案的按钮
const[choice1，setchoice1]=使用状态（“choice1”）；
const[choice2，setchoice2]=使用状态（“choice2”）；
const[choice3，setchoice3]=使用状态（“choice3”）；
const[choice4，setchoice4]=使用状态（“choice4”）；
//每个问题的最终答案
常量[answer1，setAnswer1]=useState（“”）
常量[answer2，setAnswer2]=useState（“”）
常量[answer3，setAnswer3]=useState（“”）
常量[answer4，setAnswer4]=useState（“”）
const nextQuestion=（）=>{
如果（计数器==0）{
设置问题（（上一个）=>“问题1”）
}否则如果（计数器===1）{
设置问题（（上一个）=>“问题2”）
}否则如果（计数器===2）{
设置问题（（上一个）=>“问题3”）
}否则如果（计数器===3）{
设置问题（（上一个）=>“问题4”）
}否则如果（计数器===4）{
设置问题（（上一个）=>“问题5”）
}否则{
设置问题（（上一个）=>“完成”）
}
}
常量finalAnswer=（参数）=>{
如果（计数器==1）{
setAnswer1（参数）；
}否则如果（计数器===2）{
setAnswer2（参数）；
}否则如果（计数器===3）{
setAnswer3（参数）；
}否则如果（计数器===4）{
setAnswer4（参数）；
} 
}
常量递增器=（）=>{
setCounter（（prev）=>prev+1）；
控制台日志（计数器）；
nextQuestion（）；
}
返回(
);
}
导出默认应用程序；

我的测验.js

import React from 'react';

const Quiz = (props) => {
    return (
        <div>
            <h1>
                {props.question}
            </h1>
            <button onClick={props.finalAnswer(props.choice1)}>{props.choice1}</button>
            <button onClick={props.finalAnswer(props.choice2)}>{props.choice2}</button>
            <button onClick={props.finalAnswer(props.choice3)}>{props.choice3}</button>
            <button onClick={props.finalAnswer(props.choice4)}>{props.choice4}</button>
            <button onClick={props.counter}>next</button>
        </div>
    )
}

export default Quiz

从“React”导入React；
常量测验=（道具）=>{
返回(
{props.question}
{props.choice1}
{props.choice2}
{props.choice3}
{props.choice4}
下一个
)
}
导出默认测验

问题就在这里

{props.choice1}…

实际上，您并没有分配函数，而是调用函数

finalAnswer（choice）

，该函数在进行

渲染时试图更改父级
（应用）
状态，这就是您看到该警告的原因

您只需要将
finalAnswer
包装在回调中

像这样试试

<button onClick={() => props.finalAnswer(props.choice1) }>{props.choice1}</button>
... and all for others.

props.finalAnswer（props.choice1）}>{props.choice1}
... 这一切都是为了别人。

注意：有更好的方法做你的事情，试着找出简单的解决方案，而不是单独处理
状态

有一个，你可以找到简单的解决方案。
你可能需要将
finalAnswer
包装在useCallback中。嘿，有人刚刚问过一个类似的问题