Question

我正在学习反应并尝试使用钩子。代码的作用是从Ajax获取数据然后显示列表。但是我得到了错误：

SyntaxError: Inline Babel script: Unterminated JSX contents (53:21)
51 | 
52 |   ReactDOM.render(
> 53 |     <MyList/>,
     |         ^
54 |     document.getElementById('example')
55 |   );
56 |      when I load the index.html in browser.

以下是index.html中的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="jquery.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
  class MyList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        loading: true,
        error: null,
        data: null
      };
    }

    componentDidMount() {
      const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
      $.getJSON(url)
       .done(
        (value) => this.setState({
          loading: false,
          data: value
        })
      ).fail(
        (jqXHR, textStatus) => this.setState({
          loading: false,
          error: jqXHR.status
        })
      );
    }

    render() {
      if (this.state.loading) {
        return <span>Loading...</span>;
      } else if (this.state.error !== null) {
        return <span>Error: {this.state.error}</span>;
      } else {
        var projects = this.state.data.items;
        var results=[];
        projects.forEach(p => {
          var item=<li>{p.name}<li>;
          results.push(item);
        });
        return (
          <div>
            <ul>the result list is {results}</ul>
          </div>
        );
      }
    }
  };

  ReactDOM.render(
    <MyList/>,
    document.getElementById('example')
  );
    </script>
  </body>
</html>

如果Ajex调用获取数据，请将其保存到this.state.data，然后尝试迭代它以显示其所有元素。有人可以帮忙吗？

Answer 1

我把它放在codepen中并在第36行注意到你没有关闭<li>标签。我只是关闭了<li>这样的</li>标记就解决了语法错误。查看codepen：http://codepen.io/justdan/pen/RpOWBz?editors=1010

var item=<li>{p.name}<li>;

尝试更改为

var item=<li>{p.name}</li>;

Answer 2

执行System.out.println( " You have successfully created the following Pandora Channel:)"+newChannel = newChannel.toUpperCase();

react SyntaxError：内联Babel脚本：未终止的JSX内容

2 个答案: