小编zil*_*nas的帖子

首先，对于类组件，这可以正常工作并且不会导致任何问题。

但是，在带有钩子的功能组件中，每当我尝试从滚动事件侦听器的函数设置状态时，handleScroll即使我使用了去抖动，我的状态也无法更新或应用程序的性能会受到严重影响。

import React, { useState, useEffect } from "react";
import debounce from "debounce";

let prevScrollY = 0;

const App = () => {
  const [goingUp, setGoingUp] = useState(false);

  const handleScroll = () => {
    const currentScrollY = window.scrollY;
    if (prevScrollY < currentScrollY && goingUp) {
      debounce(() => {
        setGoingUp(false);
      }, 1000);
    }
    if (prevScrollY > currentScrollY && !goingUp) {
      debounce(() => {
        setGoingUp(true);
      }, 1000);
    }

    prevScrollY = currentScrollY;
    console.log(goingUp, currentScrollY);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll); …

我正在尝试创建位于页面中间的 TabBar（说明小部件必须位于顶部）。

问题是我必须手动设置包含 TabBarView 的容器小部件的高度。如果我离开它没有这个高度，我会得到错误Horizontal viewport was given unbounded height.。

顶级小部件：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[Description(), Tabs()],
        ),
      ),
    );
  }

标签小部件：

class Tabs extends StatelessWidget {
  final _tabs = [
    Tab(
      icon: Icon(Icons.menu),
      text: 'Menu',
    ),
    Tab(
      icon: Icon(Icons.mode_comment),
      text: 'Reviews',
    )
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _tabs.length,
        child: Column(
          children: <Widget>[
            TabBar(
              labelColor: PickColors.black,
              indicatorSize: TabBarIndicatorSize.tab,
              tabs: _tabs,
            ),
            Container(
              width: double.infinity,
              height: …

大家好！

我正在尝试使Angular 5应用程序隐藏元素（或显示为隐藏）。但是，这似乎不起作用。

我已经尝试过ngHide，ng-hide，ngShow，ng-show，[隐藏]方法-它们都不起作用。

我的login.component.ts看起来像这样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  isHidden: boolean = true;
  input_pw: string = 'password';

  constructor() { }

  ngOnInit() {
    console.log(this.isHidden); //console shows true
  }

}

和login.component.html：

<div class="container">

  <div class="cont-login">
    <div class="login-pane">

      <div>
        <p class="inner log-labels">Your password</p>
        <input class="txt" type="password" [(ngModel)]="input_pw" ngHide="isHidden">
      </div>

      <div>
        <input class="btn" type="submit" value="Login">
      </div>

    </div>


  </div>

</div>

我在这里做错什么了吗？

注意：我没有更改或添加任何与CSS相关的内容。

GitHub页面用我自己的index.html文件包装了我的create-react-app的index.html。

原始的index.html文件具有meta标记，而GitHub的没有。

我无法更改Github的index.html文件的元数据，并且它不使用原始CRA的index.html中的元数据。

如何解决这个问题？

该项目具有基本的React项目文件结构：

大家好！

我有一个带有简单登录功能的React.js项目。在授权用户之后，我调用history.push方法，该方法会更改地址栏中的链接，但不会呈现新组件。（我使用BrowserRouter）

我的index.js组件：

ReactDOM.render(
  <Provider store={createStore(mainReducer, applyMiddleware(thunk))}>
    <BrowserRouter>
      <Main />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

我的Main.js组件：

const Main = (props) => {
  return (
    <Switch>
      <Route exact path="/" component={Signin} />
      <Route exact path="/servers" component={Servers} />
    </Switch>
)}

export default withRouter(Main);

我的动作创作者：

export const authorization = (username, password) => (dispatch) =>
  new Promise ((resolve, reject) => {
    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: username,
        password: password,
      })
    }).then( response => …

Gutentag，伙计们！

卸载组件后，我不断从应用程序中收到此错误消息：

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Header (at index.js:27)

现在，这里是Header组件的代码：

class Header extends Component {
  isCancelled = false;
  state = {
    someStateVars: x,
    separateColumns: 'true',
  }

  handleChange = (event) => {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = …

我正在尝试在 Flutter Bloc 中创建一个计时器，以便在调用 DataFetchRequested 事件后每 30 秒获取一次数据。

\nclass DataBloc extends Bloc<BlocEvent, BlocState> {\n  final Api _api;\n  Timer _timer;\n\n  DataBloc(this._api);\n\n  @override\n  BlocState get initialState => StateInitial();\n\n  @override\n  Stream<BlocState> mapEventToState(BlocEvent event) async* {\n    if (event is DataFetchRequested) {\n      _resetTimer((timer) => _fetchData());\n      yield* _fetchData();\n    }\n  }\n\n  Stream<BlocState> _fetchData() async* {\n    yield StateLoading();\n\n    try {\n      final result = await _api.fetch();\n      yield StateSuccess(result);\n    } catch (e) {\n      _timer.cancel();\n      yield StateFailure(e.toString());\n    }\n  }\n\n  _resetTimer(void Function(Timer) onCallback) {\n    _timer?.cancel();\n    _timer = Timer.periodic(Duration(seconds: 1), onCallback);\n  }\n\n …