- 此问题在此处已有答案**：
Why useEffect running twice and how to handle it well in React?（3个答案）
5小时前关门了。
我是React.Js的初学者
我不知道为什么useEffect在没有任何依赖关系的情况下多次调用API
如果有其他的方法，请给我提建议
页面文件：* /页面*/ Jmeter 板/语音/[ slug]. js
} else if(slug == "repeat-sentence") {
if (userData.role == "Admin") {
return (<> <AdminRepeatSentence /> </>);
} else if(userData.role == "Teacher") {
return (<> <TeacherRepeatSentece /> </>);
} else if(userData.role == "Student") {
return (<> <StudentRepeatSentece /> </>);
}组件文件：* /组件*/ Jmeter 板/朗读/重复句子. js
export function StudentRepeatSentece(params) {
const [para, setPara] = useState();
useEffect(() => {
const handlePara = async () => {
console.log(">>>>>>>>>>>>>>>fetching Have Been Start");
const res = await fetch("/api/speaking/read-aloud");
console.log(">>>>>> Fetch API <<<<<<<<<<");
const data = await res.json();
console.log(data);
setData(data.para);
console.log(">>>>>>>>> Convert Json <<<<<<<<");
};
handlePara();
}, []);
return (<> <SecondComponent myPara={para}/> </> );
}- 儿童**组件
function SecondComponent({myPara}) {
// Some Code Will Be Here
useEffect(()=> {
speak(myPara);
}, [myPara]);
retunr (<>someCode
{myPara}
Some Code
</>);
}
2条答案
按热度按时间toiithl61#
如果你是下<React.StrictMode>，它会重新渲染一次的应用程序。
可能是吧。
gv8xihay2#
我认为问题出在setData上（data.帕拉）函数在StudentRepeatSentece组件的第10行被调用。useEffect肯定会在加载该组件时运行，但setData（）函数使用useState钩子，确保当存储在帕拉变量内的数据发生变化时，组件被重新呈现，因此，它会进入无限循环，一次又一次地重新呈现相同的组件。保持useEffect（）干净始终是一个好做法，方法是不在useEffect（）中使用任何其他钩子，如useState（）。但是，如果需要，解决方法是：
在这里你可以创建一个布尔变量assignValueToPara，它记录是否给para变量赋值。2将它添加为useEffect的依赖项。3当页面加载时，这个变量的初始值为true。但是一旦setPara（）函数在第10行被调用，这个布尔值也会被设置为false，它会阻止你的页面进入这个重新呈现的循环。
您可以参考博客了解更多详情。