Question

案例1。

    handleRemovePlayer = id => {
        this.setState(prevState => {
            return {
                players: prevState.players.filter(player => player.id !== id)
            };
        });
    };

案例2。

    // Arrow Func: become Component instance
    incrementScore = () => {
        this.setState(prevState => ({
            score: this.state.score + 1
        }));
    };
    decrementScore = () => {
        if (this.state.score > 0) {
            this.setState(prevState => ({
                score: this.state.score - 1
            }));
        }
    };

在setState（）中，为什么case1无法使用this.players.filter而不是prevState.player？ case1和2都使用相同的prevState回调。.有人能确切解释prevState吗？提前致谢！

Answer 1

SetState是一个异步方法。因此，如果有多个setState执行方法，则第二种方法可能会产生我们不感兴趣的值。但是第一种方法将确保我们始终获得最新的状态值。

人们应该始终使用const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserJSPlugin = require('terser-webpack-plugin'); const plugins = [ new HtmlWebpackPlugin({ inject: false, hash: true, template: __dirname + '/../src/app/Views/layouts/layout-template.phtml', filename: __dirname + '/../src/app/Views/layouts/layout.phtml' }), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: 'css/[name].css', }), ]; module.exports = () => ({ output: { publicPath: '/dist/', }, optimization: { minimize: true, minimizer: [new TerserJSPlugin({ terserOptions: { extractComments: 'all', compress: { drop_console: true } } }), new OptimizeCSSAssetsPlugin({})], }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, { test: /\.(sa|sc|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, 'css-loader?', 'postcss-loader', 'resolve-url-loader', 'sass-loader' ], } ] }, plugins });而不是prevState。

Answer 2

当前，setState()在事件处理程序内部是异步的。

让我们假设-您已更新状态，并且要检查状态是否已更新。

为此，您可以使用updater（callback）作为第二个参数来检查更新状态。

像这样-

    incrementScore = () => {
      this.setState(prevState => ({
          score: prevState.score + 1
      }),()=>{
        console.log(this.state.score)
      });
  };

对setState的调用是异步的-调用this.state后不要立即依赖setState来反映新值。如果您需要根据当前状态计算值，请传递更新器函数而不是对象...供您参考setState in reactjs

关于.setState（）中的prevState回调

2 个答案: