小编Eri*_*sen的帖子

我想要一个带有粘性子标题的 material-ui 列表项。我设法得到了这个粘性，但是滚动时子标题与项目重叠：

如何防止这种情况？完整代码：

    <List
      {...rest}
      className={clsx(classes.root, className)}
      subheader={<li />}
    >
      {pages.map(group => (
        <li>
          <ul className={classes.ul}>
            {group.groupname && <><Divider /><ListSubheader>{group.groupname}</ListSubheader></> }
            {group.routes.map(page => (
              <div key={page.title}>
                {page.children ? 
                  <>
                    <ListItem
                      className={classes.item}
                      disableGutters
                      key={page.title}
                    >                
                      {page.title}
                    </ListItem>
                    <Collapse in={state[page.title] ? true : false} timeout="auto" unmountOnExit>
                      <List component="div" disablePadding>
                        {page.children.map(childpage => (
                          <ListItem
                            className={classes.nested}
                            disableGutters
                            key={childpage.title}
                          >                
                            {childpage.title}
                          </ListItem>
                        ))}

                      </List>
                    </Collapse>
                  </>
                  : 
                  <ListItem
                    className={classes.item}
                    disableGutters
                    key={page.title}
                  >
                    {page.title}
                  </ListItem>
                }
              </div>
            ))}
          </ul>
        </li>
      ))}
    </List>

我从 material-ui 网站扩展了示例

谁能向我解释一下解决以下问题的“正确”方法是什么？我有这个简单的页面，其中包含事件数据。最初这是上周的数据，但页面上有一个按钮可以将数据设置为所有数据。我使用 useEffect() 来 loadData() 并最初设置 all=false 。当我单击按钮时，我想将所有更新为 true，将数据更新为所有数据。

下面的代码可以工作，但有点奇怪，因为我首先必须获取 !all 的数据，然后我设置 all=true，但随后它再次重新渲染。

有没有一个好的方法来做到这一点？我尝试以相反的方式放置“onClick”代码，因此：setAll(!all);loadData(all)，但这不起作用，因为状态不会立即更新。

任何帮助/提示都会很棒！

 const Events = ({auth}) => {


const [data, setEventData] = useState([])
const [all, setAll] = useState(false)

const loadData = async (givenScope) => {
    const scope = (givenScope ? '' : '?scope=last_week')
    const eventdata = await makeAPICall('/api/events' + scope, 'GET', null, await auth.getAccessToken())
    setEventData(eventdata);
}

useEffect(() => {
    loadData(all);
}, [])

const columns = [{
    Header: 'Datum/tijd',
    accessor: 'datetime',
    Cell: props => <Moment date={props.value} tz="Europe/Amsterdam" format="YYYY-MM-DD HH:mm"/> …

我试图找到解决问题的方法，但找不到，并在寻找一些“最佳实践示例”。我有一个nodejs express应用程序，我的功能分为文件。例如，我有此控制器（oktacontroller.js）：

var okta_api_key = <here some await data, getting from db>;

const OKTA_ORG_URL = '<here too>';

exports.createUser = async (req, res) => {

    console.log(okta_api_key);
}

exports.getGroups = async (req, res) => {
    console.log(okta_api_key);
}

在两个导出的函数（都是快速路由）中，我都需要var okta_api_key。我知道我可以通过在两个函数中查询它们来获取它们，因为它们是异步函数，我可以在那儿使用await，但是每次查询它都感觉很愚蠢（因为它永远不会改变）。

我该如何处理？我知道我可以这样做：

var okta_api_key = <here some await data, getting from db>;

const OKTA_ORG_URL = '<here too>';

exports.createUser = async (req, res) => {

    console.log(okta_api_key);
}

exports.getGroups = async (req, res) => {
    console.log(okta_api_key);
}

但这感觉也不错。

有什么办法可以使某种大型函数（异步）导出两个函数吗？换句话说：如何在文件（模块）的顶层使用await。它不需要在顶层（这是不可能的），但是可以使用某种方法使我的“顶层”变量暴露给导出的函数。

编辑：其他用例，因为我得到了将其放在配置文件中的建议。是的，这是可行的，但是例如：我还有其他一些api密钥，每次启动时都会从服务本身获取他的访问令牌（因为它会过期）。该令牌无法存储在配置文件中，因此我需要一些异步工作来获取该值。我知道顶级等待不起作用（甚至是不希望的），但是我只想举一个例子，说明如果这是您的项目，你们将如何做:)

我正在尝试用打字稿构建一个 React 应用程序，但在正确键入组件时遇到了一些问题。

这是我的代码：

import React from 'react';
import PropTypes, { InferProps } from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
import { Typography, Link, Theme } from '@material-ui/core';

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        padding: theme.spacing(4),
    },
})); 

const Footer: any = (props: InferProps<typeof Footer.propTypes>): JSX.Element => {
    const { className, ...rest } = props;
    const classes = useStyles();

    return (
        <div {...rest} className={clsx(classes.root, className)}>
        </div>
    );
};

Footer.propTypes = {
    className: …