堆栈内存溢出
  繁体   English   中英

Material UI Select 组件崩溃 React 应用程序

[英]Material UI Select component crashing React application

 原文  2020-11-17 12:24:42  2   2    javascript/ reactjs/ material-ui

问题描述

我正在尝试将材料 ui select 组件添加到我正在使用的 React 应用程序。 当我尝试向表单添加 select 功能时，它崩溃了。 尽管使用了文档中的确切示例，但我得到了相同的错误和应用程序崩溃。

到目前为止，我已经尝试过：

  • 修补 ID
  • 删除和更改各种道具以查看我是否可以确定导致错误的特定点（运气不好）
  • 确保value prop 是空字符串，子项匹配MenuItem （运气不好）
  • 设置一个defaultValue道具（运气不好）
  • 删除其他组件以确保问题集中在<Select>组件上（它集中在Select上FormControl和InputLabel不会导致崩溃）
  • 创建了一个仅包含来自文档的示例SimpleSelect组件的新路由（仍然崩溃，并且该组件就在 App 组件下方，因此上游不应影响它）
  • 确保@material-ui/core是最新的 (4.11.0)
  • 删除了 node_modules 并重新安装了所有内容
  • 搜索 web 以解决诸如此类的其他问题，但没有发现任何问题

控制台上的错误日志通常也很神秘：

The above error occurred in the <data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs=> component:
    in data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs= (created by ForwardRef(SelectInput))
    in ForwardRef(SelectInput) (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(FilledInput))
    in ForwardRef(FilledInput) (created by WithStyles(ForwardRef(FilledInput)))
    in WithStyles(ForwardRef(FilledInput)) (created by ForwardRef(Select))
    in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (created by SimpleSelect)
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by SimpleSelect)
    in div (created by SimpleSelect)
    in SimpleSelect (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in ThemeProvider (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.

和Uncaught DOMException: String contains an invalid character 。

这是生成相同错误的组件（来自文档的精确副本）：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-helper-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-helper-label"
          id="demo-simple-select-helper"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Some important helper text</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <Select
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Without label</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel shrink id="demo-simple-select-placeholder-label-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-placeholder-label-label"
          id="demo-simple-select-placeholder-label"
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Label + placeholder</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl} disabled>
        <InputLabel id="demo-simple-select-disabled-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-disabled-label"
          id="demo-simple-select-disabled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Disabled</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl} error>
        <InputLabel id="demo-simple-select-error-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-error-label"
          id="demo-simple-select-error"
          value={age}
          onChange={handleChange}
          renderValue={(value) => `⚠️  - ${value}`}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Error</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-readonly-label">Name</InputLabel>
        <Select
          labelId="demo-simple-select-readonly-label"
          id="demo-simple-select-readonly"
          value={age}
          onChange={handleChange}
          inputProps={{ readOnly: true }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Read only</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-autowidth-label"
          id="demo-simple-select-autowidth"
          value={age}
          onChange={handleChange}
          autoWidth
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Auto width</FormHelperText>
      </FormControl>
      <FormControl className={classes.formControl}>
        <Select
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem value="" disabled>
            Placeholder
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Placeholder</FormHelperText>
      </FormControl>
      <FormControl required className={classes.formControl}>
        <InputLabel id="demo-simple-select-required-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-required-label"
          id="demo-simple-select-required"
          value={age}
          onChange={handleChange}
          className={classes.selectEmpty}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Required</FormHelperText>
      </FormControl>
      <FormControl variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={age}
          onChange={handleChange}
          label="Age"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
      <FormControl variant="filled" className={classes.formControl}>
        <InputLabel id="demo-simple-select-filled-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-filled-label"
          id="demo-simple-select-filled"
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

这可能是一个构建链相关的问题，所以这是我的 webpack 配置：

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

const isProd = process.env.NODE_ENV === "production";
const buildDir = "dist";
const useBundleAnalyzer = false;
const chalk = require("chalk");
const version = JSON.stringify(require("./package.json").version);
const author = JSON.stringify(require("./package.json").author);

console.log(
  chalk.white.bgBlue.bold(`
-------------------------------------------------------------------------
            Application Front End
            Version: ${version}
            running: ${process.env.NODE_ENV}
            by: ${author}
-------------------------------------------------------------------------
`)
);

module.exports = {
  entry: {
    main: "./src/root.jsx",
  },
  mode: process.env.NODE_ENV !== "production" ? "development" : "production",
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: "~",
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  output: {
    path: path.join(__dirname, buildDir),
    filename: "[name].[hash].js",
    chunkFilename: "[name].[id].[hash].chunk.js",
    publicPath: "/",
  },
  resolve: {
    modules: [path.join(__dirname, "./src"), "node_modules"],
    extensions: [".js", ".jsx"],
  },
  devServer: {
    hot: false,
    disableHostCheck: true,
    inline: true,
    contentBase: path.join("./", buildDir),
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Headers": "true",
    },
  },
  devtool: process.env.NODE_ENV === "development" ? "inline-source-map" : "",
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
      {
        test: /\.css$|\.scss$|\.sass$/,
        loaders: [
          "style-loader",
          "css-loader",
          "resolve-url-loader",
          "sass-loader",
        ],
      },
      {
        test: /.(png|woff(2)?|eot|ttf|svg)/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [
    ...(isProd ? [new CleanWebpackPlugin({ verbose: true })] : []),
    /**
     * Show visualization of webpack bundle.
     */
    ...(useBundleAnalyzer ? [new BundleAnalyzerPlugin()] : []),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
      VERSION: version,
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "./src/html/index.html"),
      filename: "index.html",
      inject: "body",
    }),
  ],
};

有没有人遇到过类似的问题？ 这个问题让我停滞不前，让我很沮丧。

编辑：图标不是问题。 下面的组件也发生了同样的事情：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

export default function SimpleSelect2() {
  const classes = useStyles();

  return (
    <div>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={10}
          onChange={event => console.log(event)}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

编辑2：

这是崩溃后的 DOM：

崩溃后的 dom

编辑 3：

Chrome 上更具描述性的错误消息：

错误消息铬

2 个解决方案

解决方案1
 2 已采纳  2020-11-17 15:53:31

我发现了问题并修复了它。 我正在写一个更全面的解释作为答案，以便遇到类似问题的任何其他人都可以从中受益。 这是我找到它的方法：

我在问题中发布的“神秘”错误消息包含以下字符串：

<data:application/javascript;charset=utf-8;base64,aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnOwppbXBvcnQgY3JlYXRlU3ZnSWNvbiBmcm9tICcuLi8uLi91dGlscy9jcmVhdGVTdmdJY29uJzsKLyoqCiAqIEBpZ25vcmUgLSBpbnRlcm5hbCBjb21wb25lbnQuCiAqLwoKZXhwb3J0IGRlZmF1bHQgY3JlYXRlU3ZnSWNvbiggLyojX19QVVJFX18qL1JlYWN0LmNyZWF0ZUVsZW1lbnQoInBhdGgiLCB7CiAgZDogIk03IDEwbDUgNSA1LTV6Igp9KSwgJ0Fycm93RHJvcERvd24nKTs=

字符串的第一部分告诉我这是一个base64 编码的字符串。 当我解码它时，这就是我得到的：

"import * as React from 'react';
import createSvgIcon from '../../utils/createSvgIcon';
/**
 * @ignore - internal component.
 */

export default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {
  d: \"M7 10l5 5 5-5z\"
}), 'ArrowDropDown');"

正如评论所暗示的那样，这是 Material UI 使用的内部组件。 它涉及svg并且基于此，我检查了我的 webpack 配置以查看我如何处理svg以及修补它是否可以解决此问题。

这是在我的应用程序的 webpack 配置中处理svg的部分配置：

      {
        test: /.(png|woff(2)?|eot|ttf|svg)/,
        loader: "url-loader?limit=100000",
      },

url-loader在这里引起了问题，将其注释掉可以解决这个问题。 顺便说一下，取消限制也不会改变任何事情。 我将使用另一个加载程序来解决这个问题。 所以最终这是一个工具问题。

感谢@Jared Smith 和@Ryan Cogswell 的评论。 你们两个都很接近你的猜测，遵循它们最终会让我发现这个发现。

解决方案2
 0  2022-05-03 19:43:37

我的解决方案：

再次删除并克隆该项目。

但是我有一个稍微不同的错误：

The above error occurred in the <ForwardRef(SelectInput)> component:
at SelectInput (http://localhost:3001/static/js/bundle.js:23392:25)
at http://localhost:3001/static/js/bundle.js:6569:66
at div
at http://localhost:3001/static/js/bundle.js:6569:66

我设法将问题缩小到这个“value={act.name}”； 如果我完全删除该属性，它会呈现，但当然，select 将不起作用。

{actions.map((act: Action) => {
    return (<MenuItem key={act.name} value={act.name} disabled={!hasAnyRoles(act.roles)}>{act.name}</MenuItem>)
})}

奇怪的是，这个问题是凭空出现的，因为有一天它工作正常，我什至部署在 AWS 服务器上（也许我错过了什么......）。 第二天，我的本地版本和服务器版本都出现了这个问题。 在服务器上，我再次运行管道（构建和部署）并且它起作用了。 在我的电脑上，我尝试了所有我能想到的。 解决问题的方法是删除所有内容并再次从 git 克隆。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 Material UI (React JS) 中根据需要制作“选择”组件 从 TextField 选择组件、Material UI 和 React 手动失去焦点 Material UI中的Autocomplte组件中的默认select反应js React Popover 组件 - Material UI 反应 Material-ui Select 是否可以在材料 ui 的选择组件中使用分页？ 材质ui选择组件下拉定位 Material UI 的 Select 组件的值类型 onChange 事件上的 Blur Material UI Select 组件 材质 UI Select 带有数据库数据的组件
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM