Question

我的反应测验应用程序遇到问题。以下是说明：这是来自App.js文件：

...
const [createQuiz, setCreateQuiz] = useState(false);
...
useEffect(()=> {
    const reRender = () => {
        setCreateQuiz(true)
    }
    window.onload=function(){
      document.getElementById("myBtn").addEventListener("click", reRender);
    } 
    // return document.getElementById("myBtn").removeEventListener("click", reRender);
  }, [createQuiz])

return (
    <QuizContextProvider>
      {
      (createQuiz) ? (
        <div>Form</div>
      ) : (
        <div>
        <Modal/>
        <Question question={questions[questionNumber]} next={goToTheNext} />
        </div>
      )
      }
      {console.log(createQuiz)}
    </QuizContextProvider>
  );
}

可以看到，它是有条件的渲染：“模态”窗口询问用户是要进行现有测验还是创建自己的测验，并且当用户单击“创建自己的”按钮时，应用应重新渲染再次，这次useEffect（）（在App.js中）将createQuiz的值设置为true。以下代码摘录来自<Modal />组件：

return (
        <div className='benclosing' style={{display:displayValue}}>
        <div className='modal'>
            <h1>Welcome!</h1>
            <p>Do you want to take an existing quiz or create your own?</p>
            <button onClick={hideWindow} >Existing quiz</button>
            <button id='myBtn'>Create your own</button>
        </div>
        </div>
    )
}

一切正常，除了：1：每当单击重新加载图标时，我的页面都会重新渲染，并再次询问用户是否要进行现有测验。我希望这种提神效果没有影响。我陷入这个问题。如何获得理想的结果？

我也尝试过：

  const reRender = () => {
    setCreateQuiz(true)
  }

  useEffect(()=> {
    reRender()
    //return setCreateQuiz(false)

  }, [createQuiz])

它没有按预期工作。我在对Red Baron的第二条评论中描述了它的原因，请看一下。

Answer 1

实现所需目标的正确方法是在App组件中创建一个事件处理程序，该事件处理程序将在单击createQuiz按钮时将true设置为Create your own Modal组件。


function App() {
  const [createQuiz, setCreateQuiz] = React.useState(false);

  const handleShowQuizForm = () => {
    setCreateQuiz(true);
  };

  return (
    <div>
      {createQuiz ? (
        <div>Form</div>
      ) : (
        <>
          <Modal showQuizForm={handleShowQuizForm} />
        </>
      )}
    </div>
  );
}

function Modal(props) {
  return (
    <div>
      <button type="button" onClick={props.showQuizForm}>
        Create your own
      </button>
    </div>
  );
}

这是一个例子：

CodeSandbox

这里不需要useEffect钩子，window.onload事件对我而言意味着您希望将createQuiz设置为true，然后“刷新”您的页面并期望createQuiz现在变成true-它不会那样工作。

此外，您使用useEffect钩子的方式可能会出现问题-您应该尽量避免在state钩子中更新useEffect的一部分，这也是一部分dependency array：

React.useEffect(() => {
  const reRender = () => {
    setCreateQuiz(true);
  }
  // although not an issue here, but if this hook was
  // rewritten and looked like the following, it would
  // case an infinite re-render and eventually crash your app
  setCreateQuiz(!createQuiz);
}, [createQuiz]);

加载页面时useEffect（）出现问题

1 个答案: