React Hooks.父组件未重新报价以执行条件语句

Question

我正在尝试重新渲染Apps.js，以将更新后的条件语句从Start.js组件读取到div。目前，我有全局状态管理模式，因此当我点击Start组件中的按钮时，它不会触发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

您必须在index.js中用GlobalProvider包装App组件，而不是在App.js中

ReactDOM.render(<GlobalProvider><App /></GlobalProvider>, document.getElementById("root"));

对上下文值的更新将导致仅对上下文提供程序中渲染的组件进行重新渲染。