我一直在学习 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) 我有这个代码:
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) 我使用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) 我对这个问题进行了一些搜索,但发现了很模糊的答案.在redux中,我们知道状态存储为对象.但这个状态实际存储在哪里?它是以某种方式保存为以后可以访问的文件吗?我所知道的是它不会以cookie格式或浏览器的本地存储中存储它.
我正在学习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.
我遇到了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函数中似乎解决了这个问题!
了解如何在构造函数中声明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,但我不确定我是否可以在构造函数之外做但仍然在类中.
我已经阅读了Map的内容,并了解了Object与Map之间的区别.我不明白为什么我会使用objects或functions作为Map允许的键.
问题:为什么以及何时设置object或function作为密钥?
我有一些需要运行的代码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) 我试图在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 ×9
reactjs ×4
ecmascript-6 ×3
react-hooks ×2
cors ×1
ember-cli ×1
ember-data ×1
ember.js ×1
fetch-api ×1
jquery ×1
json ×1
redux ×1
use-effect ×1