В компоненте Header обновленное значение фактически обновляется, когда пользователь нажимает на ListGroup.Item, но оно обновляется дважды. что я не знаю почему.
Поместите console.log(selectedView); в эффект и попробуйте снова.
Значение не обновляется в компоненте приложения. Что я делаю не так?
Каждый компонент также получает свою собственную копию ловушки useView, он не имеет какого-либо "глобального" состояния.
Вы можете разоблачить * обработчик onViewChange для вашего компонента Header и использование эффекта для обработки обратного вызова с текущим выбранным представлением.
const Header = ({ onViewChange }) => {
const [selectedView, setSelectedView] = useView();
useEffect(() => {
onViewChange(selectedView);
}, [onViewChange, selectedView]);
...
Добавление какого-либо состояния в App и сохранение значения представления вызываемого возврата
function App() {
const [selectedView, setSelectedView] = useState();
useEffect(() => {
// place console.log in effect so only logs once per update
console.log(selectedView);
}, [selectedView])
return (
<div className="App">
<Container>
<Row>
<Col>
<Logo />
<Header onViewChange={setSelectedView} />
{selectedView === VIEW.clients && <ClientsView />}
{selectedView === VIEW.categories && <CategoriesView />}
</Col>
</Row>
</Container>
</div>
);
}
