首先,对于没有发布任何“实际代码”,我深表歉意,但是我不确定哪个部分引发了错误。

我试图重构在React中为一个简单的CRUD应用找到的代码,将其从CodePen移到CodeSandbox。但是,我似乎无法使其正常工作……有人可以给我指点一下发生了什么问题吗?

javascript - 重构时ReactJS代码不起作用-怎么了?-LMLPHP

我以前见过这种错误。通常的原因是未关闭的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元素,因此我也进行了更改。

10-06 04:33
查看更多