Question

当我刷新路由时，/questions我的组件将由我相信的某种调试器运行。参见VM76464 Questions.jsx:105行。 componentDidMount()运行两次，这是意外的。

这仅在刷新组件时发生，而不是在通过链接移至该组件时发生。警告消息也仅在刷新组件时出现。

我第一次看到这个。

我的webpack.config.js是...

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') 

module.exports = {
    entry: ['babel-polyfill', './app/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/, 
                use: 'babel-loader' 
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    mode: 'development',
    plugins: [
        new HtmlWebPackPlugin({
            template: 'app/index.html'
        })
    ],
    resolve: {
        extensions: ['.js', '.jsx']
    }
}

Questions.jsx

import React from 'react'

import { Link } from 'react-router-dom'
import { getQuestions } from '../../utils/apiCalls'

import './question.css'

class Questions extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            questions:[]
        }

        this.updateQuestions = this.updateQuestions.bind(this)
    }

    componentDidMount() {
        console.log('mount')
        this.updateQuestions()
    }

    async updateQuestions() {
        let questions = await getQuestions('http://localhost:1076/api/questions')
        this.setState({questions})
        console.log('update questions')
    }

    render() {
        const questions = this.state.questions
        console.log(questions)
        return ( 
            <div id='tinQuestions'>
                {
                    this.state.questions.length > 0 &&
                    <div id='tinQuestionsList'>
                        <h3>Discover</h3>
                        {
                            questions.map(question => {
                                return (
                                    <Link to={`question/${question.id}`} key={question.id}>
                                        {question.title}
                                    </Link>
                                )

                            })
                        }
                    </div>
                }
            </div>
        )
    }
}

export default Questions

Answer 1

如警告所示，

async updateQuestions() {
        let questions = await getQuestions('http://localhost:1076/api/questions')
        this.setState({questions})
        console.log('update questions')
    }

当getQuestions解析时，

被调用，而在未安装组件时可能会发生。它变得棘手。您将必须使用可取消包装承诺。 https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html或为您的apiCall使用订阅模型，或引入某种状态管理器来提供该功能。

Webpack正在运行调试器？

1 个答案: