React hooks-setInterval:在状态更新之前启动渲染

Question

我在使用React Hooks时遇到了问题，特别是当我试图运行"setInterval"；。目前我的应用程序有2个按钮；下一个"；以及"；播放"；。

当"；下一个"；点击：功能"；onNext"；函数运行，应用程序呈现。

当我点击"；播放"：函数"；onPlay"函数已运行，但组件在状态更新之前进行渲染。我相信"；setInterval"；正在打乱时间，但我不知道如何修复它，或者导致组件等待渲染，直到状态更新。

我最初的想法是使用"；useEffect"；，但我不知道如何将其与"；播放"；按钮(因为您不能在函数中放置"useEffect"或任何钩子(。我确实尝试过：

useEffect(() => {setInterval(() => {onNext();}, 500)}), [state3D]}

但这导致它在应用程序打开时开始运行。有什么想法可以更好地设置吗？

import React, { useState, useRef, useEffect } from "react";
import ThreePointVis from "./ThreePointVis.jsx";
// import ThreePointVis_Tut from "./ThreePointVis_Tut.jsx";
import Controls3D from "./Controls3D.jsx";
import Settings3D from "./Settings3D.jsx";
import {
createWorld,
create3DWorld,
nextGen,
randomFill,
} from "../files/game3D.jsx";
import { loadPreset } from "../files/presets3D.jsx";
import "./styles3D.css";
import React, { useState, useRef, useEffect } from "react";
import ThreePointVis from "./ThreePointVis.jsx";
// import ThreePointVis_Tut from "./ThreePointVis_Tut.jsx";
import Controls3D from "./Controls3D.jsx";
import Settings3D from "./Settings3D.jsx";
import {
createWorld,
create3DWorld,
nextGen,
randomFill,
} from "../files/game3D.jsx";
import { loadPreset } from "../files/presets3D.jsx";
import "./styles3D.css";
export const Game3D = (props) => {
const [state3D, setState3D] = useState({
// world3D: loadPreset("line"),
world3D: loadPreset("plane"),
generation: 0,
isPlaying: false,
colorStyle: "default",
});
const changeState = (props) => {
// console.log("3d changestate: ", props);
const { world3D, generation } = props;
setState3D({ ...state3D, world3D: world3D, generation: generation });
};
const onChange = (world) => {
// console.log("onChange: ", world);
changeState({ world3D: world, generation: state3D.generation + 1 });
};
const onPlay = () => {
console.log("3D onPlay: ", state3D.world3D);
setState3D({ ...state3D, isPlaying: true });
setInterval(() => {
onNext();
}, 500);
};
const onNext = () => {
// console.log("onNext: ", state3D.world3D);
onChange(nextGen(state3D.world3D));
};
const onStop = () => {
console.log("onStop...");
setState3D({ ...state3D, isPlaying: false });
clearInterval();
};
const onSettingStyle = (settings, rules) => {
// console.log("onsettings: ", settings, rules);
const { colorStyle, gridSize, preset, generationSpeed } = settings;
setState3D({
...state3D,
world3D: loadPreset(`${preset}`),
generation: generationSpeed,
colorStyle: `${colorStyle}`,
});
};
const onShuffle = () => {
changeState({ world3D: randomFill(state3D.world3D), generation: 0 });
};
const onClear = () => {
changeState({ world3D: createWorld(), generation: 0 });
};
// console.log("state3D:", state3D);
return (
<div className="container-3D">
<Settings3D isPlaying={state3D.isPlaying} load={onSettingStyle} />
<div className="vis-container">
<ThreePointVis world={state3D.world3D} />
</div>
<Controls3D
isPlaying={state3D.isPlaying}
play={onPlay}
next={onNext}
stop={onStop}
shuffle={onShuffle}
clear={onClear}
/>
</div>
);
};

Answer 1

使用react生命周期方法来同步视图，而不是使用设置的间隔。您可以使用componentDidMount((来设置您的状态。我建议你读一下https://reactjs.org/docs/state-and-lifecycle.html