最初未呈現的樣式組件不加載其樣式

Question

當初始渲染樹中不存在樣式組件時，它不會加載其樣式。 例如，我有一張卡片，其中有一些從 API 獲取的數據，如果 API 花費的時間超過 2 秒（大約），則不會加載樣式。

const Card = styled.div`
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  min-width: 200px;
`;

const ToDosPage = ({ createData, toDos, getData }) => {
  const [newTodo, setNewTodo] = useState({
    expirated: false,
    done: false,
    done_by: 2,
    task: 1,
  });
  useEffect(() => {
    getData('toDos');
  }, [getData]);

  const renderToDos = () => toDos.map((toDo) => <Card>{toDo.title}</Card>);

  return (
    <div>
      <div>{renderToDos()}</div>
    </div>
  );
};

const mapStateToPops = (state) => ({ toDos: state.dataManager.toDos });

const mapDispatchToProps = { createData, getData };

export default connect(mapStateToPops, mapDispatchToProps)(ToDosPage);

我認為問題可能出在 index.html 或 webpack 中：

<!DOCTYPE html>
<html>
  <head>
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!--load all styles -->
    <title>
      my-app
    </title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['babel-polyfill', './app'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.(css)$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, {loader: 'postcss-loader', ident: 'postcss'}],
        exclude: /node_modules/,
      },
    ],
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html',
    }),
  ],
};

父組件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Provider } from 'react-redux';

import store from './src/store';
import ToDosPage from './src/pages/ToDosPage';
import TasksPage from './src/pages/TasksPage';
import Menu from './src/components/Menu';
import { colors } from './src/utils/constants';

const App = () => (
  <Provider store={store}>
    <Router>
      <Menu />
      <Route path='/todos' component={ToDosPage} />
      <Route path='/tasks' component={TasksPage} />
    </Router>
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

在嘗試了很多事情之后，我發現 chrome 中的某些擴展存在問題。 我禁用了所有擴展程序，它開始正常工作。

編輯：它可以是任何擴展，它不必與反應相關。 例如，在我的情況下，它是一個 Loom 擴展

最初未呈現的樣式組件不加載其樣式

問題描述

1 個解決方案

解決方案1
1 已采納 2020-01-14 15:19:43

最初未呈現的樣式組件不加載其樣式

問題描述

1 個解決方案

解決方案1 1 已采納 2020-01-14 15:19:43

解決方案1
1 已采納 2020-01-14 15:19:43