小编ken*_*igo的帖子

安装react组件时未调用componentDidMount()

我一直试图从服务器获取一些数据,并且由于一些奇怪的原因componentDidMount()没有按原样发射.我console.log()在里面添加了一个声明componentDidMount()来检查它是否正在开火.我知道对服务器的请求是正常的,因为我在反应之外使用它并且它应该工作.

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      obj: {}
    };
  };

  getAllStarShips () {
    reachGraphQL('http://localhost:4000/', `{
     allStarships(first: 7) {
       edges {
         node {
           id
           name
           model
           costInCredits
           pilotConnection {
             edges {
               node {
                 ...pilotFragment
               }
             }
           }
         }
       }
     }
    }
    fragment pilotFragment on Person {
     name
     homeworld { name }
   }`, {}). then((data) => {
     console.log('getALL:', JSON.stringify(data, null, 2))
      this.setState({
        obj: data
      });
   });
  }

  componentDidMount() …
Run Code Online (Sandbox Code Playgroud)

reactjs

13
推荐指数
2
解决办法
3万
查看次数

使用webpack和react-router进行延迟加载和代码分割无法加载

我正在努力将我的react v0.14+ redux v3.0+ react-router v1.0代码库从客户端渲染转移到服务器端渲染,使用webpack v1.12捆绑和代码分割成块来按需加载路由和组件.

我跟随并将我的设置基于https://github.com/rackt/example-react-router-server-rendering-lazy-routes,因为我认为它提供了简单性和实用性.整天昨天我一直在努力转向服务器端渲染,但我遇到了一些我无法解决的问题,我不能完全确定它们是webpack不是因为没有正确设置,如果我正在做某事react-router在服务器/客户端或路由配置上有错误,或者我设置错误redux导致这些问题.

我遇到了以下问题:

  1. 我能够加载初始页面,一切运行良好,但没有其他路由加载,并给我GET http:// localhost:3000/profile 404(未找到)
  2. 索引/主页javascript有效,但所有资源(css)都被渲染,因为text/javascript样式不会显示,除非它们是内联的.

webpack.config.js

var fs = require('fs')
var path = require('path')
var webpack = require('webpack')

module.exports = {

  devtool: 'source-map',

  entry: './client/client.jsx',

  output: {
    path: __dirname + '/__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/__build__/'
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      }
    ]
  },

  plugins: [ …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack react-router redux

7
推荐指数
1
解决办法
9010
查看次数

加载样式使用Webpack会导致样式在初始加载时闪烁

我正在研究一个项目,我试图通过webpack加载我的scss/sass.我目前正在使用以下库成功加载它:

  • node-sass
  • sass-loader
  • css loader
  • style-loader

我能够成功地require/ import样式,但问题是,当我加载应用程序时,页面加载没有样式约1.5秒,然后页面"闪烁",样式最终加载.

有没有办法通过webpack解决这个问题?我听说过ExtractTextPlugin和其他一些人但是我试图通过查看文章示例和github示例来实现它,但它们似乎无法通过使用require/ import在需要的地方工作.我只想根据我的反应组件需求来定义样式.不加载组件不需要的任何样式.

sass webpack

6
推荐指数
1
解决办法
763
查看次数

如何将请求体传递给GraphQL上下文?

我正在尝试将请求主体放入上下文中,因为正文的一部分包含需要解码的JWT.但是,当我尝试以下内容时,我的上下文未定义:

    app.use('/', graphqlHTTP((req) => ({
      schema: Schema,
      context: req.body,
      pretty: true,
      graphiql: false
    })));
Run Code Online (Sandbox Code Playgroud)

我退出了req,我没有看到身体.我正在使用一个名为react-reach的库,它会在请求中向主体添加以下内容:

    {
      query: {...},
      queryParams: {...},
      options: {
       token: '...' // <-- I'm passing the token into options
      }
    }
Run Code Online (Sandbox Code Playgroud)

我知道正在解释正文,因为正在解释和执行正文中的查询/突变.传递给上下文时似乎无法找到它.

api node.js graphql graphql-js

6
推荐指数
1
解决办法
3122
查看次数

标签 统计

reactjs ×2

webpack ×2

api ×1

graphql ×1

graphql-js ×1

node.js ×1

react-router ×1

redux ×1

sass ×1