页面加载上的React函数

我希望在页面加载时调用heartsDisplay函数，但这样做会导致错误。它只适用于点击。我如何在React中做到这一点？

或者可能有一种方法可以在useState钩子中为红心添加默认值？

import React, { useState } from 'react'
import './App.css';
var heartsNum = 3;
const App = () => {
const [hearts, setHearts] = useState("");

var Score = 0;
var customColor = {color: 'red'};
const heartsDisplay = () => {
if (heartsNum === 3) {
setHearts("Hearts: ❤❤❤");
} else if (heartsNum === 2) {
setHearts("Hearts: ❤❤");
} else if (heartsNum === 1) {
setHearts("Hearts: ❤");
} else if (heartsNum < 1) {
setHearts("Hearts: ");
}
};
heartsDisplay();
const changeHearts = () => {
heartsNum = heartsNum - 1;
console.log(heartsNum);
heartsDisplay();
}

return (
<div>
<h3 className='hearts'>{hearts}</h3>
<button className='col1' onClick={changeHearts}>Click</button>
</div>
)
}
export default App

useEffect(()=>{
heartsDisplay();
},[]);

调用useEffect((钩子中的函数

useEffect挂钩允许您在组件中执行副作用。

一些副作用的例子包括：获取数据、直接更新DOM和定时器。

useEffect接受两个参数。第二个参数是可选的。

useEffect(<function>, <dependency>)

https://reactjs.org/docs/hooks-effect.html

import React, { useState } from 'react'
import './App.css';
var heartsNum = 3;
const App = () => {
const [hearts, setHearts] = useState("");

var Score = 0;
var customColor = {color: 'red'};
const heartsDisplay = () => {
if (heartsNum === 3) {
setHearts("Hearts: ❤❤❤");
} else if (heartsNum === 2) {
setHearts("Hearts: ❤❤");
} else if (heartsNum === 1) {
setHearts("Hearts: ❤");
} else if (heartsNum < 1) {
setHearts("Hearts: ");
}
};

在没有deps的useEffect钩子内调用函数，以便在状态或道具的更改将该状态或道具放入deps数组时运行该函数一次以触发如果您想在卸载前触发该函数，请在useEffect回调中返回一个函数在该函数中执行如果您在组件函数中公开调用该函数，它将在所有呈现中调用该函数

useEffect(() => {
heartsDisplay();
},[]);
const changeHearts = () => {
heartsNum = heartsNum - 1;
console.log(heartsNum);
heartsDisplay();
}
return (
<div>
<h3 className='hearts'>{hearts}</h3>
<button className='col1' onClick={changeHearts}>Click</button>
</div>
)

}

导出默认应用

您误解了useState的用法。useState的默认值是hearts变量的默认值。

你要找的可能是useEffect钩子。它的默认行为是

类似于componentDidMount和componentDidUpdate

这基本上会导致页面加载行为。

import React, { useState, useEffect } from 'react'
import './App.css';
var heartsNum = 3;
const App = () => {
const [hearts, setHearts] = useState("");

var Score = 0;
var customColor = {color: 'red'};
useEffect(() => {
heartsDisplay();
},[]);

const heartsDisplay = () => {
if (heartsNum === 3) {
setHearts("Hearts: ❤❤❤");
} else if (heartsNum === 2) {
setHearts("Hearts: ❤❤");
} else if (heartsNum === 1) {
setHearts("Hearts: ❤");
} else if (heartsNum < 1) {
setHearts("Hearts: ");
}
};
const changeHearts = () => {
heartsNum-=1;
console.log(heartsNum);
heartsDisplay();
}
return (
<div>
<div></div>
<h3  className='hearts'>{hearts}</h3>
<button className='col1' onClick={changeHearts}>Click</button>
</div>
)
}
export default App

相关内容

最新更新

热门标签：