小编bai*_*win的帖子

我已经尝试安装反应图标,在我的应用程序中我运行了npm命令:

sudo npm install react-icons --save

除了一些可选的依赖项之外,我没有得到任何错误

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 
(node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"linux","arch":"x64"})

每当我尝试导入一些图标时,我都会收到错误消息

./src/components/SkiDaysCount.js
Module not found: Can't resolve 'react-icons/lib/md' in ' 
'/home/kristoffer/ReactApps/navbar/src/components'

这是我的进口:

import {Terrain} from 'react-icons/lib/md'
import {SnowFlake} from 'react-icons/lib/ti'
import {Calender} from 'react-icons/lib/fa'

为什么我收到此错误？

编辑:

我也尝试使用旧语法导入,具有相同的问题:

import Calender from 'react-icons/lib/fa/calender'

我尝试使用 Base64 编码文件向我的节点服务器发出发布请求。

我收到 PayloadTooLargeError: requestEntity Too Large 异常，所以我按照 Express 4 约定扩展了有效负载限制

app.use(bodyParser.json({limit: '100mb'}));
app.use(bodyParser.urlencoded({limit: '100mb', extended: true}));

但是问题仍然出现，有人可以帮我解决为什么吗？

这是我的全局变量

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false}))
app.use(bodyParser.json({limit: '100mb'}));
app.use(bodyParser.urlencoded({limit: '100mb', extended: true}));

我有一些 React 后坐力状态，但是每当手动刷新页面时，后坐力状态都会重置。

这是正常行为吗，因为我知道其他状态管理库喜欢flux并且react-redux会这样做。

最好的做法是将其保存localStorage到实际保存在浏览器中（因为 localStorage 也是一个同步 api，所以这肯定也会导致一些问题。）

即使它是一个相当新的库，是否有某种方法即使在手动页面刷新时也能保持状态？

我有一个flask应用程序，在该应用程序中，我希望根据操作闪烁不同的警报消息。

这是我的第一封邮件，我在其中检查电子邮件是否与我的正则表达式模式匹配：

reciver = str(email)
if not re.match(r"[^@]+@[^@]+\.[^@]+", reciver):
    flash("Please enter a valid email address", 'error')
    return render_template("about.html")

这是第二条消息，如果成功发送一条消息，则会显示该消息：

flash('Message sent succesfully', 'succes')   
return render_template("about.html")

这是我的HTML代码：

      <h1 class="mb-5"> Enter your message, and i will get back to you as soon as possible</h1>
      {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
            <div class="alert alert-success">
            <li>{{ message }} </li>
         </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
        {% block body %}{% endblock …

我的 React 项目中有一个提交表单，我在其中使用 filepond API，因此用户可以将文件提交到表单

到目前为止，我只是使用从文档中获取的标准 FilePond 组件。

   <FilePond ref={ref => this.pond = ref}
                      allowMultiple={true} 
                      maxFiles={4} 
                      oninit={() => this.handleInit() }
                      onupdatefiles={(fileItems) => {
                          // Set current file objects to this.state
                          this.setState({
                              files: fileItems.map(fileItem => fileItem.file)
                          });
                      }}>

                {/* Update current files  */}
                {this.state.files.map(file => (
                    <File key={file} src={file} origin="local" 
                 />
                ))}

            </FilePond>

我将整个请求发送到 Java 中的后端 REST 服务器，因此我想发送信息类型、数据（base64 编码）和文件扩展名。

我通过在请求中创建对象数组来做到这一点

  result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.encodeFileHandler(file)
        }))
    }

在我的encodeFileHandler 中，我需要一种将数据转换为base64 的方法，但我在文件对象上看不到具有原始数据的属性。

有没有办法访问它，或者有人有我可以使用的更好的替代方案吗？

我有一个全栈项目，它是用 Django-REST 和 React 作为前端。

每次我尝试将 css 文件加载到我的 React 应用程序中时，我都会收到错误

import './Dashboard.css'

导出默认类仪表板扩展组件{

render() {
...

仪表板.css

body {
margin:0;
}

这是我的 webpack.config.js

module.exports = {
module: {
       rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

对我来说奇怪的是，内联CSS工作得很好，只有当我尝试加载外部表时，我才会遇到问题。有谁知道问题的原因可能是什么？

我想创建一个包含多行的 ReChart 组件。

到目前为止，我有这个虚拟代码。

<LineChart
  data={data}
  margin={{
    top: 16,
    right: 16,
    bottom: 0,
    left: 24
  }}
>
  <XAxis dataKey="time" />
  <YAxis>
    <Label angle={270} position="left" style={{ textAnchor: "middle" }}>
      Cyber assesment
    </Label>
  </YAxis>
  <Line type="monotone" dataKey="amount" stroke="#556CD6" dot={false} />
</LineChart>

数据是一个数组，有两个值对象：

function createData(time, amount) {
  return { time, amount };
}

const data = [
  createData('00:00', 0),
  createData('03:00', 300),
  createData('06:00', 600),
  createData('09:00', 800),
  createData('12:00', 1500),
  createData('15:00', 2000),
  createData('18:00', 2400),
  createData('21:00', 2400),
  createData('24:00', undefined),
];

我想这样做，所以我可以绘制多条线，在那里我尝试创建一个不同的函数并将其他数据添加到同一个数组中，但没有好的结果。

如何做到这一点？

我试图创建一个工作示例，但没有任何运气

function createData(time, amount) { …

我有一个 node.js 项目（更具体地说是 Nest JS），在出现如下所述的相同错误后，我尝试重新安装我的依赖项。

我以前从未见过这样的事情。我检查了yarn.lock和pacakge.json文件，anymatch发现依赖项仅列为其他依赖项的依赖项（如图 2 所示）

以前有人经历过这样的事情吗？

我有一个React应用程序，在这里我使用某些输入形式的处理程序来设置状态

<div class="form-group has-danger">


 <label class="form-control-label" for="inputDanger1">Username</label>
  <input type="text" name="username" value={this.state.username} onChange={this.onChange} className={this.state.isUsernameCorrect ? "form-control is-valid" :"form-control is-invalid"} id="inputInvalid" />
  {this.state.isUsernameCorrect ? <div class="valid-feedback">Username is acceptable!</div> :
  <div class="invalid-feedback">Please enter a valid username</div> }
</div>

<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Password</label>
  <input type="password" name="password" value={this.state.password} onChange={this.onChange} className={this.state.isUsernameCorrect ? "form-control is-valid" :"form-control is-invalid"} id="inputInvalid" />
  {this.state.isPasswordCorrect ? <div class="valid-feedback">password is acceptable!</div> :
  <div class="invalid-feedback">Please enter a valid password</div> }
</div>

与各自的处理程序

onChange = (e) =>{
    const name = e.target.name;
    const value …

是否有声明的任何区别state，从构造的？

我这里有一个组件示例：

class BurgerBuilder extends Component {
  state = {
    ingredients: {
      salad: 0,
      bacon: 0,
      cheese: 0,
      meat: 0
    },
    totalPrice: 30
  };
  ....
}

这里我只是声明了一个叫做state的变量，里面包含了组件的变量，但是我没有调用构造函数。

正如我声明的那样：

class BurgerBuilder extends Component {
  constructor() {
    super();
    this.state = {
      ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0
      },
      totalPrice: 30
    };
  }
  ....
}

我发现，我可以this.setState用于这两种解决方案，并且我的项目没有真正的区别。是否有最佳实践，在什么地方使用什么。