Question

我正在尝试重新呈现Apps.js，以将更新后的条件语句从Start.js组件读取到div。当前，我具有全局状态管理模式，因此当我从“启动”组件中单击按钮时，它不会触发App.js重新呈现。 App.js

import { GlobalContext } from "./context/GlobalState";
import Start from "./components/start";
import "./App.css";
import { GlobalProvider } from "./context/GlobalState";

function App() {
  const {
    showStartPage,
    test,
    tester
    // header,
    // showGroup,
    // currentQuestion,
    // direction,
    // handleNextQuestion,
    // handlePreviousQuestion,
    // completion,
  } = useContext(GlobalContext);

  const [show, setShow] = useState(showStartPage);
  // let showPage = false

  useEffect(() => {
    // setShow(showStartPage)
    //
    // return showStartPage => {};
    //   tester();

    setShow(showStartPage);
    if (!showStartPage) {
      window.location.reload();
    }
    //   // const survey = showStartPage ? <Start /> : null;
    console.log("from APP.js", show);
  }, [showStartPage, show]);

  return (
    <GlobalProvider>
      {showStartPage ? (
        <Start />
      ) : (
        <>
          <div>Survey Questions will Go Here {test}</div>
        </>
      )}
    </GlobalProvider>
  );
}

export default App.js```

Answer 1

您必须将App的{{1}}包裹在GlobalProvider中，而不是index.js

App.js

对上下文值的更新将导致重新渲染到上下文提供程序中唯一呈现的组件。

反应钩子。父组件不重新渲染以执行条件语句

1 个答案: