小编nem*_*035的帖子

为什么每次渲染都会调用来自 `useEffect` 的清理函数?

我一直在学习 React,我读到从返回的函数useEffect是为了进行清理,而 React 在组件卸载时执行清理。

因此,我对其进行了一些试验,但在以下示例中发现,每次组件重新渲染时都会调用该函数,而不是仅在从 DOM 卸载时调用该函数,即每次组件重新渲染时都会调用该函数console.log("unmount");

这是为什么?

function Something({ setShow }) {
  const [array, setArray] = useState([]);
  const myRef = useRef(null);

  useEffect(() => {
    const id = setInterval(() => {
      setArray(array.concat("hello"));
    }, 3000);
    myRef.current = id;
    return () => {
      console.log("unmount");
      clearInterval(myRef.current);
    };
  }, [array]);

  const unmount = () => {
    setShow(false);
  };

  return (
    <div>
      {array.map((item, index) => {
        return (
          <p key={index}>
            {Array(index + 1)
              .fill(item)
              .join("")}
          </p>
        );
      })}
      <button onClick={() => …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks use-effect

40
推荐指数
1
解决办法
3万
查看次数

为什么我们要在没有依赖数组的情况下使用 useEffect?

我有这个代码:

const App: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState(true);
  const [maxHeight, setMaxHeight] = React.useState();

  const wrapper = React.useRef<HTMLDivElement>(null);
  const content = React.useRef<HTMLDivElement>(null);

  const setElementMaxHeight = () => {
    if (content && content.current) {
      setMaxHeight(isOpen ? content.current.offsetHeight : 0);
    }
  };

  useEffect(() => {
   setElementMaxHeight();

    window.addEventListener("resize", setElementMaxHeight);

    return () => {
      window.removeEventListener("resize", setElementMaxHeight);
    };
  });

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <button onClick={toggle}>
        <span className="nominal-result__expander fa" />
      </button>
      <div
        className="nominal-results__list-wrapper"
        ref={wrapper}
        style={!!maxHeight …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-hooks

29
推荐指数
1
解决办法
2万
查看次数

fetch()意外的输入结束

我使用fetch()从api服务器获取数据.我的错误看起来像这样:

Uncaught (in promise) SyntaxError: Unexpected end of input at 
  fetch.then.blob.
Run Code Online (Sandbox Code Playgroud)

你能告诉我我做错了什么吗?

const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
  mode: 'no-cors'
}).then(blob => blob.json())
  .then(data => console.log(data))
Run Code Online (Sandbox Code Playgroud)

javascript json cors fetch-api

26
推荐指数
5
解决办法
3万
查看次数

在Redux中,状态实际存储在哪里?

我对这个问题进行了一些搜索,但发现了很模糊的答案.在redux中,我们知道状态存储为对象.但这个状态实际存储在哪里?它是以某种方式保存为以后可以访问的文件吗?我所知道的是它不会以cookie格式或浏览器的本地存储中存储它.

javascript reactjs redux

23
推荐指数
1
解决办法
5686
查看次数

单线到多线ES6 Fat Arrow功能?

我正在学习ES6胖箭头功能.更改此代码的正确方法是什么,以便能够放置另一行,即使const a = 100;在指定的位置,以便我可以为此函数添加更多行?

IMAdded: (options, args) => ({
    IMAdded: {
        filter: newIM => true, *need to add another line here*
    },
}),
Run Code Online (Sandbox Code Playgroud)

更新:

这是运行的ES6代码:

const subscriptionManager = new SubscriptionManager({
    schema,
    pubsub,
    setupFunctions: {
        APPTAdded: (options, args) => ({
            APPTAdded: {
                filter: appointment => (true),
            },
        }),
});
Run Code Online (Sandbox Code Playgroud)

我想在返回的代码中添加更多行true.

javascript ecmascript-6

21
推荐指数
1
解决办法
1万
查看次数

JQuery:在dragstart事件上更改DOM会立即触发dragend吗?

我遇到了Chrome和Opera的一个错误,我想知道它是否已知,如果有,是否有解决方案?

如果我在dragstart事件上更改DOM,它会立即触发dragend事件?!这是一个错误还是背后有一些原因?只发生在Chrome和Opera中.Firefox有效.

我很感激每一个答案.

$('body').on({
      dragstart: function(e) {
        
        dragProfilefieldSrcElformid = $(this).attr("data-profilefieldid-formid");
        e.dataTransfer = e.originalEvent.dataTransfer;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', $(this).attr("data-profilefieldid"));
        
        // Changing the DOM, fires the dragend Event in Chrome?
        $("#plugin_loginlogout_pfcontainer_" + dragProfilefieldSrcElformid).find(".plugin_loginlogout_pf_entryfield").addClass("highlight"); // This doesn't work in Chrome and Opera, but in Firefox
      },
      dragend: function() {
        console.log("dragend");
      }
      ".plugin_loginlogout_pf");
Run Code Online (Sandbox Code Playgroud)

编辑:

将DOM Change放在setTimeout函数中似乎解决了这个问题!

javascript jquery

17
推荐指数
1
解决办法
1403
查看次数

在类方法之外声明一个类属性

了解如何在构造函数中声明x和y:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
Run Code Online (Sandbox Code Playgroud)

有没有办法在函数之外声明属性,例如:

class Point {
  // Declare static class property here
  // a: 22
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
Run Code Online (Sandbox Code Playgroud)

所以我想分配给22,但我不确定我是否可以在构造函数之外做但仍然在类中.

javascript ecmascript-6

15
推荐指数
1
解决办法
1万
查看次数

ES6 Map:为什么/何时使用对象或函数作为键?

我已经阅读了Map的内容,并了解了Object与Map之间的区别.我不明白为什么我会使用objectsfunctions作为Map允许的键.

问题:为什么以及何时设置objectfunction作为密钥?

javascript ecmascript-6

15
推荐指数
1
解决办法
1031
查看次数

覆盖DS.Store ember-cli

我有一些需要运行的代码store.init.

我尝试扩展默认存储app/store.js,ember-cli似乎把它当作商店,但是对象this.store不是商店

我的店铺定义:

import DS from 'ember-data';

export default DS.Store.extend({
  init:function(){
    console.log('watatLoL')
  }
});
Run Code Online (Sandbox Code Playgroud)

ember.js ember-data ember-cli

13
推荐指数
2
解决办法
2571
查看次数

React JS Uncaught Reference Error:函数未定义

我试图在ReactJs组件中的click事件时调用shuffleCards.但是,我收到以下错误:

Uncaught ReferenceError: shuffleCards is not defined
Run Code Online (Sandbox Code Playgroud)

这是我的代码:

constructor(props) {
    super(props);

    this.state = {
        count: 0
    };
}

shuffleCards(array) {
    var i = array.length,
        j = 0,
        temp;

    while (i--) {
        j = Math.floor(Math.random() * (i+1));

        temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

handleClickEvent(event) {
    var cards = [
        {txt: "A",
        isDisplayed: false},
        {txt: "B",
        isDisplayed: false},
        {txt: "C",
        isDisplayed: false}
    ];
    if (this.state.count == 0) {
        cards = shuffleCards(cards);
    }

}
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

11
推荐指数
2
解决办法
3万
查看次数