React-admin 多次渲染运行时资源

Question

我遵循React-admin 的设计模式来定义父Team资源，但每次页面刷新时都会调用 useEffect 挂钩 4 次

上下文提供程序只是能够将Teams列表传递给布局中的选择，如果我删除它，也会发生同样的问题

这是预期的行为吗？

const AdminEnterprise = () => {
  return (
    <AdminContext
      disableTelemetry
      authProvider={authProvider}
      dataProvider={dataProvider}
    >
      <TeamResources />
    </AdminContext>
  );
};

const TeamResources = () => {
  const dataProvider = useDataProvider();
  const [state, dispatch] = useReducer(teamReducer, {
    loading : true,
    teams : []
  })

  useEffect(() => {
    //This is called 4 times on page refresh
    console.log('querying user teams')
    dataProvider.getList('userTeams')
      .then(({data}) =>{
        dispatch({
          teams: data,
          selected: data[0].id,
          loading: false
        })
      })
      .catch(error => {
        dispatch({
          error: error,
          loading: false
        })
      })
  }, [])

  return (
    <TeamContext.Provider value={[state, dispatch]}>
      {state.loading? <></> : (
        <AdminUI layout={MyLayout} loginPage={CustomLoginPage} theme={myTheme}>
          <Resource name={`teams/${state.selected}/projects`} list={ProjectList} options={{label: 'Projects' }}/>
          <Resource name={`teams/${state.selected}`} />
        </AdminUI>
      )}     
    </TeamContext.Provider>
  )
}

Answer 1

显然，您从组件进行了根重新渲染AdminEnterprise，您TeamResources是正确的，但是您可以从顶层优化它或通过在组件React.memo内部使用来优化它TeamResources（推荐）。您可以通过以下方式导出memo：

const TeamResources = () => {
  ~ ~ ~
};

export default React.memo(TeamResources);

如需调整，React.memo您可以在此处获取更多信息