0

我创建了一个包含两列的页面：

  1. 在一列中的想法是显示项目列表
  2. 在另一列中，我应该显示一些与所选项目相关的信息

我到目前为止的代码是：

import { INavLink, INavLinkGroup, INavStyles, Nav } from "@fluentui/react";
import React, { createContext, useContext, useState } from "react";

interface HistoryTtem {
  id: string;
}

interface AppState {
  selectedItem: string | undefined;
  updateSelectedItem: (value: string | undefined) => void;
  items: Array<HistoryTtem>;
}

const AppContext = createContext<AppState>({
  selectedItem: undefined,
  updateSelectedItem: (value: string | undefined) => {},
  items: []
});

const App = () => {
  const Column1 = () => {
    const rootState: AppState = useContext(AppContext);

    const getNavLinks: Array<INavLink> = rootState.items.map((item) => ({
      name: item.id,
      key: item.id,
      url: ""
    }));

    const groups: Array<INavLinkGroup> = [
      {
        links: getNavLinks
      }
    ];

    const navStyles: Partial<INavStyles> = {
      root: {
        boxSizing: "border-box",
        border: `1px solid #eee`,
        overflowY: "auto"
      }
    };

    const onItemClick = (
      e?: React.MouseEvent<HTMLElement>,
      item?: INavLink
    ) => {
      if (item && item.key) {
        rootState.updateSelectedItem(item.key);
      }
    };

    return (
      <Nav
        onLinkClick={onItemClick}
        selectedKey={rootState.selectedItem}
        ariaLabel="List of previously searched transactions"
        styles={navStyles}
        groups={groups}
      />
    );
  };

  const Column2 = () => {
    return <div>aaa</div>;
  };

  const [historyItems, setHistoryItems] = useState<Array<HistoryTtem>>([
    {
      id: "349458457"
    },
    {
      id: "438487484"
    },
    {
      id: "348348845"
    },
    {
      id: "093834845"
    }
  ]);
  const [selectedItem, setSelectedItem] = useState<string>();

  const updateSelectedItem = (value: string | undefined) => {
    setSelectedItem(value);
  };

  const state: AppState = {
    selectedItem: selectedItem,
    updateSelectedItem: updateSelectedItem,
    items: historyItems
  };

  return (
    <AppContext.Provider value={state}>
      <div>
        <Column1 />
        <Column2 />
      </div>
    </AppContext.Provider>
  );
};

export default App;

如您所见，我有一个根状态，它将用于驱动从第一列内部触发的第二列的更新。但它不起作用。当我单击一个项目时，第一列中的整个组件正在重新渲染，而它应该只更改所选项目。

请在此处找到CodeSandbox。

4

2 回答 2

1

你不应该嵌套组件函数。

Column1因为它是一个内部函数，所以每次渲染的变化的身份，App这使得 React 认为它需要协调一切。

向上移动Column1到Column2模块级别。

于 2021-01-14T13:34:57.470 回答
0

什么react rerender是两件事：

  1. 状态变化

  2. 道具变化

您有一个App Componentwhich 是您的根，components并且它的selectedItem状态在单击 an 时会发生变化，item因此您有一个新状态，新状态将导致重新渲染

于 2021-01-14T13:46:21.997 回答