在React中渲染后执行一个函数

Question

大家早上好/下午好，

我已经使用React几个月了。我尽量避免使用React组件，而是使用React Hooks，但我不得不承认，有时我的目标会变得复杂。

其中一个时刻是在呈现组件后只执行一次函数。在我的例子中，我想在所有组件呈现后只执行一次递归函数(typeText)。

• 这是项目CodeSandbox的链接(React)): https://codesandbox.io/s/execute-after-rendering-jzz87
• 这是我想要实现的(静态): https://codesandbox.io/s/type-effect-jfzhl

下面是一个react项目的例子:

import React, { useEffect, useState } from "react";
export default function App() {
const [word, setWord] = useState("");
const list = ["Bag", "Door", "Shelving"];
let isWriting = true;
let selectedWord = 0,
position = 0,
delay = 0;
const typeText = () => {
if (isWriting === true) {
if (position < list[selectedWord].length) {
setWord(word + list[selectedWord].charAt(position++));
delay = 100;
} else {
isWriting = false;
delay = 1500;
}
} else {
if (word.length > 0) {
setWord(word.substring(0, word.length - 1));
delay = 40;
} else {
isWriting = true;
selectedWord = (selectedWord + 1) % list.length;
position = 0;
delay = 300;
}
}
setTimeout(() => typeText(), delay);
};
useEffect(() => {
typeText();
}, []);
return (
<div className="App">
<h1>{word}</h1>
</div>
);
}

非常感谢你们所有人的帮助，问候和拥抱!

Answer 1

你发布的不是React代码，你介意发布React部分吗?在任何情况下，在钩子中，要在渲染后运行一次，只需使用useEffect钩子:

const MyComponent = () => {
useEffect(() => {
// your code here
}, []);
return <Whatever you="are rendering" />;
};

Answer 2

问题解决了，您可以在https://codesandbox.io/s/execute-after-rendering-jzz87中看到更改。

谢谢大家!