React自定义钩子值未更改

Question

我有以下使用钩子的简单反应页面

https://codesandbox.io/embed/funny-resonance-2ijv4?fontsize=14&hidenavigation=1&theme=dark

我将选择的值提取到一个单独的组件中，以便其他组件可以访问它。在Header组件中，一旦用户单击ListGroup.Item，更新的值实际上就会更新，但是会更新两次。我不知道为什么。

秒，该值不会在App组件中更新。 我怎么了？

Answer 1

在Header组件中，更新的值实际上是在用户单击ListGroup.Item时更新的，但是已更新两次。我不知道为什么。

将console.log(selectedView);置于效果中，然后重试。

该值不会在App组件中更新。我怎么了？

每个组件还具有自己的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>
  );
}