我一直在学习 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