对 if else 语句进行过多的重新渲染
React too many re-renders on if else statements
我正在尝试使用 setState 来更改值 currentTheme 每当程序注意到主题时,存储在 App.js 中的状态更改为特定值。我收到此错误:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
不太确定在这里做什么,任何帮助将不胜感激。提前致谢!
import React, { useState } from "react";
import styled from "styled-components";
import Editor from "./Editor";
import { monokai, solarizedDark, terminal, textmate } from "./ui/themes";
const CodeContainer = ({ setHtml, setCss, setJs, setRenderDoc, theme }) => {
const [currentTheme, setCurrentTheme] = useState(monokai);
if (theme === "textmate") {
setCurrentTheme(textmate);
} else if (theme === "solarized_dark") {
setCurrentTheme(solarizedDark);
} else if (theme === "terminal") {
setCurrentTheme(terminal);
} else {
setCurrentTheme(monokai);
}
return (
<Container style={currentTheme}>
<Editor
setHtml={setHtml}
setRenderDoc={setRenderDoc}
languageName="html"
theme={theme}
/>
<Editor
setCss={setCss}
setRenderDoc={setRenderDoc}
languageName="css"
theme={theme}
/>
<Editor
setJs={setJs}
setRenderDoc={setRenderDoc}
languageName="javascript"
theme={theme}
/>
</Container>
);
};
export default CodeContainer;
const Container = styled.div`
height: 40vh;
border-bottom: 4px #211e1c solid;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
`;
正如评论中提到的那样,问题是您 运行 在每次渲染和反应时都会注意到并阻止应用程序 运行。
您可以利用 useEffect 挂钩,这是一个用于侦听值变化并根据这些变化产生副作用的挂钩,它取代了基于 class 的组件中的所有生命周期方法。
React.useEffect(() => {
if (theme === "textmate") {
setCurrentTheme(textmate);
} else if (theme === "solarized_dark") {
setCurrentTheme(solarizedDark);
} else if (theme === "terminal") {
setCurrentTheme(terminal);
} else {
setCurrentTheme(monokai);
}
}, [theme])
第一个参数是一个回调函数,它将运行当主题值改变时你想做的任何逻辑,第二个参数是一个数组,用来告诉useEffect什么时候运行,所以在这种情况下,我们传递 theme 属性,它会在每次值更改时告诉钩子 运行。
如果你想了解更多你可以做的事情,这是它的文档:
https://reactjs.org/docs/hooks-effect.html
我认为您不需要状态。做一个这样的函数,如果主题改变,它会为你得到正确的currentTheme。
const getTheme = (theme) => {
if (theme === "textmate")
return textmate;
if (theme === "solarized_dark")
return solarizedDark;
if (theme === "terminal")
return terminal;
return monokai;
}
这样称呼它:
<Container style={getTheme(theme)}>
或者,您可以使用局部变量内联计算主题:
const CodeContainer = ({ setHtml, setCss, setJs, setRenderDoc, theme }) => {
let currentTheme = monokai;
if (theme === "textmate") {
currentTheme = textmate;
} else if (theme === "solarized_dark") {
currentTheme = solarizedDark;
} else if (theme === "terminal") {
currentTheme = terminal;
}
return (
<Container style={currentTheme}>
//...
)
}
我正在尝试使用 setState 来更改值 currentTheme 每当程序注意到主题时,存储在 App.js 中的状态更改为特定值。我收到此错误:
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
不太确定在这里做什么,任何帮助将不胜感激。提前致谢!
import React, { useState } from "react";
import styled from "styled-components";
import Editor from "./Editor";
import { monokai, solarizedDark, terminal, textmate } from "./ui/themes";
const CodeContainer = ({ setHtml, setCss, setJs, setRenderDoc, theme }) => {
const [currentTheme, setCurrentTheme] = useState(monokai);
if (theme === "textmate") {
setCurrentTheme(textmate);
} else if (theme === "solarized_dark") {
setCurrentTheme(solarizedDark);
} else if (theme === "terminal") {
setCurrentTheme(terminal);
} else {
setCurrentTheme(monokai);
}
return (
<Container style={currentTheme}>
<Editor
setHtml={setHtml}
setRenderDoc={setRenderDoc}
languageName="html"
theme={theme}
/>
<Editor
setCss={setCss}
setRenderDoc={setRenderDoc}
languageName="css"
theme={theme}
/>
<Editor
setJs={setJs}
setRenderDoc={setRenderDoc}
languageName="javascript"
theme={theme}
/>
</Container>
);
};
export default CodeContainer;
const Container = styled.div`
height: 40vh;
border-bottom: 4px #211e1c solid;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
`;
正如评论中提到的那样,问题是您 运行 在每次渲染和反应时都会注意到并阻止应用程序 运行。
您可以利用 useEffect 挂钩,这是一个用于侦听值变化并根据这些变化产生副作用的挂钩,它取代了基于 class 的组件中的所有生命周期方法。
React.useEffect(() => {
if (theme === "textmate") {
setCurrentTheme(textmate);
} else if (theme === "solarized_dark") {
setCurrentTheme(solarizedDark);
} else if (theme === "terminal") {
setCurrentTheme(terminal);
} else {
setCurrentTheme(monokai);
}
}, [theme])
第一个参数是一个回调函数,它将运行当主题值改变时你想做的任何逻辑,第二个参数是一个数组,用来告诉useEffect什么时候运行,所以在这种情况下,我们传递 theme 属性,它会在每次值更改时告诉钩子 运行。 如果你想了解更多你可以做的事情,这是它的文档: https://reactjs.org/docs/hooks-effect.html
我认为您不需要状态。做一个这样的函数,如果主题改变,它会为你得到正确的currentTheme。
const getTheme = (theme) => {
if (theme === "textmate")
return textmate;
if (theme === "solarized_dark")
return solarizedDark;
if (theme === "terminal")
return terminal;
return monokai;
}
这样称呼它:
<Container style={getTheme(theme)}>
或者,您可以使用局部变量内联计算主题:
const CodeContainer = ({ setHtml, setCss, setJs, setRenderDoc, theme }) => {
let currentTheme = monokai;
if (theme === "textmate") {
currentTheme = textmate;
} else if (theme === "solarized_dark") {
currentTheme = solarizedDark;
} else if (theme === "terminal") {
currentTheme = terminal;
}
return (
<Container style={currentTheme}>
//...
)
}