小编Jen*_*Mok的帖子

import React, { Component } from 'react';

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

通常我看到的是人们在构造函数中执行this.state,如果他使用es6类.如果他不是,他可能使用getinitialstate函数放置状态.但是上面的代码(是的,它是一个工作代码),没有使用这两个.我有2个问题,这里的状态是什么？是一个局部变量？如果是,为什么它没有const？prevState来自哪里？为什么在setState中使用箭头函数？这不是很容易this.setState({value:'something'})吗？

我使用express for my api,我有一个名为app的文件夹,另一个名为server的文件夹.app是客户端应用程序,使用create-react-app作为样板,而服务器是api的express.js应用程序.

在我的服务器的app.js

app.get("*", function (req, res) {
    res.sendFile(path.resolve(__dirname, '../app/build/index.html'));
})

然后我调用我__CODE__在响应中得到的任何api端点,我很困惑,出了什么问题？

<div style={{'backgroundColor': status === 'approved' ? 'blue' : 'black'}}>
</div>

黑色是默认颜色,但如果我想添加第三个条件怎么办？

状态可以"已批准","已拒绝","待处理"或更多.

这是es6中参数的默认值吗？

function list({ skip = 0, limit = 50 } = {}) {

}

上面的代码是做什么的？

如果这是list(skip=0, limit=50)我能理解但现在我很困惑.

我想使用这个svg加载器,https://github.com/jhamlet/svg-react-loader

在我遵循的使用指令中,如

import Logo from 'svg-react-loader?name=Logo!../images/logo.svg';

但我得到了错误

Line 3:  Unexpected '!' in 'svg-react-loader?name=Logo!../images/logo.svg'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

如何确保只有登录用户才能访问主页和任务页面？我正在使用redux,我试图避免任何预先制作的auth组件来更好地了解auth.

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/login' component={Login} />
                    <Route exact path='/signup' component={Signup} />
                    <Route exact path='/task/:id' component={Task} />
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

我正在使用角度和路由中的中间件概念,但在反应中我迷失了.我认为auth与redux的商店无关？当用户在应用程序中导航时,是否需要调用以从api获取用户详细信息？

我使用create-react-app引导我的react应用程序，这是在package.json中完成的

"proxy":"http://localhost:3001"因为我的api服务器在3001上运行，但是我使用axios发出请求，它仍然指向端口3000，有什么线索吗？重新启动了我的应用几次，结果还是一样。

我能做,if(user) { //do something }但我看到人们用lodash做简单的检查.我已经阅读了lodash关于isEmpty的文档并且有方法,但是无法弄明白为什么作者会这样做.

import { isEmpty } from 'lodash'; 

if(isEmpty(user)) { //omg why? }

fetch('/auth/signup', {
      method: 'POST',
      body: this.state.user,
      headers: {
        'Content-Type': 'application/json'
      },
    })
    .then(function(response) {
      return response.json();
    })
    .then(data => {
      console.log(data);
    })

this.state.user 基本上是一个类似的对象{user: {name:"someone"}，我的服务器端代码只是这样做

router.post('/signup', (req, res, next) => {
  console.log(req.body) // empty object
}

我认为有问题fetch，没有看到网络选项卡中传递了任何数据。

我想将（对象数组）批量插入到我的文档中，但我想防止重复记录，找不到使用 insertMany 的方法。

const Song = require('../models/song');
Song.insertMany([{id:1, name:"something"},{id:2, name:"something else"])
    .then((result) => {
      res.json({
        result
      })
    })

上面的代码有效，但如果记录相同，它仍然会被插入。