Question

我使用create-react-app创建了应用程序，但我已将其迁移到webpack-express-boilerplate，现在我在控制台中收到此错误消息

invariant.js?4599:44 Uncaught (in promise) Error: setState(...): takes an object of state variables to update or a function which returns an object of state variables.
    at invariant (eval at <anonymous> (main.js:717), <anonymous>:44:15)
    at FilesList.ReactComponent.setState (eval at <anonymous> (main.js:2032), <anonymous>:63:111)
    at eval (eval at <anonymous> (main.js:1270), <anonymous>:114:24)
    at <anonymous>

webpack本身成功启动：

webpack built 53f1ce842e44dfee6a2e in 11245ms
Version: webpack 2.6.1
Time: 11245ms
                                 Asset       Size  Chunks                    Chunk Names
  674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]
  b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]
  8a86dff3aab5e62166242ab2a41a449d.svg    2.72 kB          [emitted]
  332c573a35a28e5ec065d99dbb5ef2dd.svg     450 kB          [emitted]  [big]
af7ae505a9eed503f8b8e6982036873e.woff2    77.2 kB          [emitted]
 fee66e712a8a08eef5805a46892932ad.woff      98 kB          [emitted]
                               main.js    6.18 MB       0  [emitted]  [big]  main
                            index.html  434 bytes          [emitted]

WARNING in webpack: Using NoErrorsPlugin is deprecated.
Use NoEmitOnErrorsPlugin instead.

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  1.48 MB       0
webpack: Compiled with warnings.

这是我的webpack配置文件：

module.exports = {
    devtool: 'eval-source-map',
    entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'app/main.js')
    ],
    output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[name].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                "presets": ["react", "es2015", "stage-0", "react-hmre"]
            }
        },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
            ,  {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
            , {test: /\.svg$/, loader: 'svg-loader?{png:{scale:2}}'}]
    }
};

错误的原因可能是什么？由于请求还发布了项目中的一个文件：

export default class EventsList extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    reloadData() {
        console.log("EvensList mount");
        axios.get('/EventsList')
            .then(res => {
                console.log(res);
                this.setState(res.data);
            });
    } 
    // some other stuff
}

Answer 1

如果res.data是一个对象，那么你可以做

reloadData() {
    console.log("EvensList mount");
    axios.get('/EventsList')
        .then(res => {
            console.log(res);
            this.setState({...res.data});
        });
}

但是如果它是一个数组，那么你需要指定一个键然后设置状态，如

reloadData() {
    console.log("EvensList mount");
    axios.get('/EventsList')
        .then(res => {
            console.log(res);
            this.setState({data: res.data});
        });
}

Webpack在控制台中崩溃：setState需要一个状态变量对象来更新，或者一个函数返回一个状态变量对象

1 个答案: