javascript - ReactJS 填充到多个 div 而不是 li

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

代码看起来没问题，但是列表的外部 div 中没有“key”属性。您需要包含此内容，因为 react 会引发错误。这需要是唯一的值，例如元素的索引。 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>
    );
  }
}