最初未渲染的样式组件不会加载其样式答案

【问题标题】：Initially not rendered styled-component doesn't loads its style最初未渲染的样式组件不会加载其样式
【发布时间】：2020-01-14 23:19:43
【问题描述】：

当初始渲染树中不存在样式组件时，它不会加载其样式。例如，我有一张卡片，其中包含一些从 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'));

【问题讨论】：

如果我不得不猜测，我猜想获取数据不会导致<ToDosPage> 使用新获取的数据重新渲染。为了更加自信，我们需要看看getData 是如何工作的，以及todos 如何作为道具传递给<ToDosPage>。你能edit 包含父组件吗？你也可以尝试在没有 API 调用的情况下通过将静态数据传递给 toDos 来渲染它。index.html 和 webpack 配置在这里可能不相关。
感谢您的回复！实际上它正在重新渲染，以确保我添加了一些带有 toDos 长度的控制台日志，并且我将“0”和“1”作为控制台输出，因为它是使用新组件重新渲染的。我正在使用 redux 来传递 toDos。我尝试使用“setTimeOut”传递静态数据来延迟静态数据的呈现并模拟它是一个 API 调用，我也遇到了同样的问题。我尝试的另一件事是在获取数据后添加 forceUpdate，但我遇到了同样的问题

标签： reactjs styled-components

【解决方案1】：

在尝试了很多事情后，我发现这是 chrome 中的某些扩展的问题。我禁用了所有扩展程序，它开始正常工作。

edit：它可以是任何扩展，它不必与反应相关。例如，在我的例子中，它是一个 Loom 扩展

【讨论】：