小编Mik*_*e K的帖子

这可能是重复的，但我还没有找到专门与我的问题相关的线程。

我正在进行以下 API 调用：

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};

const {
  data: { ip }
} = await axios.get("https://api.ipify.org?format=json", config);

这会引发错误：

Access to XMLHttpRequest at 'https://api.ipify.org/?format=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当我将我的应用程序部署到 Heroku 时，API 调用按预期工作。但是在我的本地机器上开发时它不起作用。不确定我在这里缺少什么。

我对这两个属性有点困惑。如果我有，

const useStyles = makeStyles(() => ({
  style: {
    width: 600,
    height: 400,
  },
}));

那么，我可以做到，

const classes = useStyles();

<SomeComponent className={classes.style} />

但我也可以，

const classes = useStyles();

<SomeComponent classes={classes} />

这两者有什么区别？

如果我有一个对象，例如：

const obj = {
  field1: {
    subfield1: true,
    subfield2: true,
  },
  field2: {
    subfield3: true,
  },
  field3: {
    subfield4: false,
    subfield5: true,
  }
}

然后我可以做一个嵌套的 for 循环来返回 true 如果一个值是false这样做的，

const findFalse = obj => {
  for (const field in obj) {
    for (const subfield in obj[field]) {
      if (!obj[field][subfield]) return true
    }
  }
}

如果这个对象没有嵌套，它会更容易一些，我可以做类似的事情，

const findFalse = obj => Object.keys(obj).some(prop => !obj[prop]);

这两种方法都不太适合我的需要，因为对象可以有 2 个、3 个或更多个嵌套属性。我想出了一个递归的方法来解决这个问题，例如：

const isObj = obj => obj && obj.constructor === Object; …

如果我有一系列物品，例如，

const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ]

我该如何映射它，以便呈现屏幕/页面，

1     6     11    16
2     7     12    17
3     8     13    18
4     9     14
5     10    15

我能够使它与

    const chunkSize = 5;

    array
      .map((e, i) => {
        return i % chunkSize === 0 ?
           selected.slice(i, i + chunkSize)
         : null;
      })
      .filter(e => e);

但是我无法使其垂直工作。我怎样才能做到这一点？

编辑：

来自另一个答案的建议解决方案将返回子数组，这不是我在此问题中提出的。

我已按照此处和此处的说明进行操作，并将以下内容添加到我的package.json

},
"babel": {
    "plugins": [
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining"
    ]
},
"dependencies": {

但我仍然收到错误

Support for the experimental syntax 'optionalChaining' isn't currently enabled

我在这里做错了什么？

我正在使用这个模块，问题是弹出的 Dialogue 元素是一个 Modal，有两个 TouchableOpacity 按钮。键入后，当键盘打开时，单击“提交”TouchableOpacity 将首先清除/隐藏键盘，只有第二次点击“提交”TouchableOpacity 才会触发 onPress 事件。我可以做些什么作为解决方法？我尝试将其更改为 Button fromreact-native和 fromreact-native-elements但它的行为方式相同。

编辑：

组件：

    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.props.isDialogVisible}
        onRequestClose={() => {
          this.props.closeDialog();
          this.setState({ inputModal: "" });
        }}
      >
        <View style={[styles.container, { ...modalStyleProps }]}>
          <TouchableOpacity
            style={styles.container}
            activeOpacity={1}
            onPress={() => {
              this.props.closeDialog();
              this.setState({ inputModal: "", openning: true });
            }}
          >
            <View style={[styles.modal_container, { ...dialogStyleProps }]}>
              <View style={styles.modal_body}>
                <Text style={styles.title_modal}>{title}</Text>
                <Text
                  style={[
                    this.props.message ? styles.message_modal : { height: 0 }
                  ]}
                >
                  {this.props.message}
                </Text> …

我有一个组件可以user从它的authprop中解构：

 const Profile = ({
     auth: {user}
 }) => {...}

问题是当我在开发时，Nodemon 会在我保存任何更改时不断刷新我的页面。当组件尝试挂载时，它会抛出一个错误，它无法user从中解构，auth因为此时auth为空（直到我导航该站点并重新登录）。

有没有一种优雅的方法来处理这个问题？我看了这篇文章，但我不能做类似的事情const { user } = auth || {}。嗯.. 我的意思是，我可以，但我想从 props 中解构，而不是const { user } = auth || {}在函数体中。

我正在尝试根据本教程使用 nginx 来 Dockerize 基本的 NextJS 设置。

我有一个用 typescript 编写的 NextJS 应用程序和一个自定义 Express 服务器，我将其部署到 Heroku。它会构建并提供服务的服务器文件.next/production-server/server.js。

当我尝试按照上述指南对应用程序进行 Dockerize 时，我运行时出现错误，

Getting error Error: EACCES: permission denied, unlink '/usr/app/.next/BUILD_ID'

我尝试运行以从节点 alpinechmod授予node用户访问权限，但它不断抛出相同的错误。

我不确定我做错了什么。如果我要从这里直接从该指南克隆存储库并运行docker-compose up，那么它似乎工作正常。但似乎当我尝试向其中添加 TS 配置时，它失败了。

FROM node:alpine

WORKDIR /usr/app

RUN npm install --global pm2

COPY ./package.json ./

RUN npm install --production

COPY ./ ./

RUN npm run build

USER node # <----------------- seems to fail with this user

EXPOSE 3000

CMD [ …

我的应用程序无法编译，因为打字稿引发以下错误：

Type '{ path: string; exact: true; render: () => Element; }' is not assignable to type 'IntrinsicAttributes
 & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'.
  Property 'exact' does not exist on type 'IntrinsicAttributes
  & IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'

我不确定发生了什么，但我相当确定这个问题是在我@types/react-router@3.0.2按照Github 上的建议安装后出现的，但我不确定为什么。

我的依赖项：

"dependencies": {
  "@types/react-dom": "^16.9.4",
  "@types/react-router": "^3.0.2",
  "@types/react-router-dom": "^5.1.3",
  "connected-react-router": "^6.7.0",
  "react-dom": "^16.12.0",
  "react-router": "^5.1.2",
  "react-router-dom": "^5.1.2",
}

奇怪的是，我从 master 签出到一个新分支并安装了@types/react-router，这引发了相同的错误，这就是为什么我确信错误来自这个包，但是运行npm uninstall @types/react-router并不能消除错误。让我的应用程序编译的唯一方法是签出到 master，否则问题仍然存在。

如果我安装最新的@types/react-router@3.0.22.

这里发生了什么？

我不知道为什么我不能让它工作。我正在选择MuiInputBase-root元素，告诉它选择字段并将边框颜色设置为蓝色，然后在焦点上将边框颜色设置为红色。我在这里做错了什么？

代码沙箱

import React from "react";
import "./styles.css";

import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";

const useStyles = makeStyles(theme => ({
  root: {
    width: "20rem"
  },
  label: {
    background: "white",
    paddingRight: theme.spacing(0.5),
    "&.Mui-focused": {
      color: theme.palette.secondary.main
    }
  },
  closeIcon: {
    color: theme.palette.grey[400],
    "&.hidden": {
      display: "none"
    }
  },
  searchIcon: {
    color: theme.palette.primary.main
  }
}));

const useOutlinedInputStyles = makeStyles({
  root: {
    "& .MuiInputBase-root": {
      "& fieldset": {
        borderColor: …