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 钩子副本，它没有任何“全局”状态。

您可以在 Header 组件上公开一个 onViewChange 处理程序属性，并使用效果来处理当前选定视图的回调。

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>
  );
}