首先,对于没有发布任何“实际代码”,我深表歉意,但是我不确定哪个部分引发了错误。
我试图重构在React中为一个简单的CRUD应用找到的代码,将其从CodePen移到CodeSandbox。但是,我似乎无法使其正常工作……有人可以给我指点一下发生了什么问题吗?
我以前见过这种错误。通常的原因是未关闭的HTML标记,但是我似乎找不到任何不完整的标记。
我从以下格式重构了许多可能是可能原因的函数:
var RecipeAdd = React.createClass({
getInitialState: function() {
return { showModal: false };
},
close: function() {
globalTitle = "";
globalIngredients = [];
this.setState({ showModal: false });
},
// more functions like this
格式更像:
class RecipeAdd extends React.Component {
getInitialState = () => {
return { showModal: false };
}
close = () => {
globalTitle = "";
globalIngredients = [];
this.setState({ showModal: false });
}
// more functions like this
原始代码:CodePen
重构:CodeSandbox
最佳答案
如@jb cazaux的答案中所述,您缺少很多匹配的花括号。但是最重要的是,您在此code example中多次定义了render()
,这在react中是不允许的。您还多次调用render
到DOM元素,这也是不允许的。好吧,至少从提供的沙箱中,您正在调用ReactDOM.render
,但这未定义。宁可调用render
,因为那是您从react-dom包中解构的函数。另外,您没有定义state
,而是在代码中的某个位置尝试访问它。
我已经分叉了您的沙箱并修复了问题。为了使问题更清楚,更容易发现,我删除了与您所面临的问题无关的部分。看看这个sandbox
PS:在该沙箱中,没有ID为“ button”但ID为“ root”的DOM元素,因此我也进行了更改。