错误消息

Question

编写我的第一个ReactJS应用程序以及我需要它做的是创建一些包含一些虚拟内容的div，我稍后将使用该网站的实际内容进行更新。

到目前为止，这是我为完成此任务而编写的代码。

class Joke extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      jokes: [],
    };
  }

  render() {
    //test content
    let jokes = ['first joke', 'second joke', 'third joke'];

    const jokes_div = jokes.map((joke) => {
        return (
            <div className="card col-md-7">
              <div className="card-body">
                 {joke}
              </div>
            </div>
        );
    });

    return (
        <div className="main-card-body">
            {jokes_div}
        </div>

    );
  }
}

// ========================================

ReactDOM.render(
  <Joke />,
  document.getElementById('jokes')
);

在html上有一个ID为jokes的div，问题是一旦ReactJS加载它会抛出多个错误，直到页面停止响应。

错误消息

ReferenceError: errors is not defined[Learn More]  main-script.js:21:3
    window.onerror http://35.196.142.180/static/js/main-script.js:21:3
    invokeGuardedCallbackDev http://35.196.142.180/static/js/react-dom.development.js:178:7
    ReactErrorUtils.invokeGuardedCallback http://35.196.142.180/static/js/react-dom.development.js:227:5
    commitRoot http://35.196.142.180/static/js/react-dom.development.js:16181:7
    completeRoot http://35.196.142.180/static/js/react-dom.development.js:17196:34
    performWorkOnRoot http://35.196.142.180/static/js/react-dom.development.js:17141:9
    performWork http://35.196.142.180/static/js/react-dom.development.js:17060:7
    performSyncWork http://35.196.142.180/static/js/react-dom.development.js:17032:3
    requestWork http://35.196.142.180/static/js/react-dom.development.js:16932:5
    scheduleWork$1 http://35.196.142.180/static/js/react-dom.development.js:16796:11
    scheduleRootUpdate http://35.196.142.180/static/js/react-dom.development.js:17363:3
    updateContainerAtExpirationTime http://35.196.142.180/static/js/react-dom.development.js:17390:10
    updateContainer http://35.196.142.180/static/js/react-dom.development.js:17417:10
    ReactRoot.prototype.render http://35.196.142.180/static/js/react-dom.development.js:17700:3
    legacyRenderSubtreeIntoContainer/< http://35.196.142.180/static/js/react-dom.development.js:17840:9
    unbatchedUpdates http://35.196.142.180/static/js/react-dom.development.js:17257:10
    legacyRenderSubtreeIntoContainer http://35.196.142.180/static/js/react-dom.development.js:17836:5
    ReactDOM.render http://35.196.142.180/static/js/react-dom.development.js:17895:12
    <anonymous> http://35.196.142.180/:56:1
    n http://35.196.142.180/static/js/babel.min.js:12:27047
    r http://35.196.142.180/static/js/babel.min.js:12:27558
    o/</< http://35.196.142.180/static/js/babel.min.js:12:27873
    s/i.onreadystatechange http://35.196.142.180/static/js/babel.min.js:12:27316

Answer 1

首先，现在没有必要调用构造函数。在这里你得到了很好的文章 https://hackernoon.com/the-constructor-is-dead-long-live-the-constructor-c10871bea599

代码看起来没问题，但是没有＆＃39;密钥＆＃39;列表中外部div的属性。你需要加入这个，因为反应会引发错误。这需要是唯一的值，例如元素的索引。 https://reactjs.org/docs/lists-and-keys.html

我已经在这里准备了工作示例，因此您可以将它与您的代码进行比较。 https://codesandbox.io/s/llonl9qp3q

核心看起来像这样：

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    const jokes_div = jokes.map((item, i) => (
      <div key={i}>
        <p>{item}</p>
      </div>
    ));
    return <div className="App">{jokes_div}</div>;
  }
}

您也可以稍微改进一下并在返回中调用它：

 class App extends Component {
  render() {
    const jokes = ["first", "second", "third"];
    return (
      <div className="App">
        {jokes.map((item, i) => (
          <div key={i}>
            <p>{item}</p>
          </div>
        ))}
      </div>
    );
  }
}

ReactJS填充到多个div而不是li

错误消息

1 个答案: