REACT JS：映射对象数组以在JSX中呈现

小编典典

REACT JS：映射对象数组以在JSX中呈现

reactjs

我是React
JS的新手，问题是我需要在这段代码中显示数据库中的所有字段。我已经能够在浏览器控制台中将所有数据作为对象获取，并且能够在浏览器中查看数组中的最后一条数据，但无法查看它们。请原谅我代码中的格式错误，这是我的新知识。在此先感谢.....

输出和代码

浏览器视图：Lands of Toys Inc.是名称131是ID

JSON数据：

{"posts":[
  {"id":"103","name":"Atelier graphique"},
  {"id":"112","name":"Signal Gift Stores"},
  {"id":"114","name":"Australian Collectors, Co."},
  {"id":"119","name":"La Rochelle Gifts"},
  {"id":"121","name":"Baane Mini Imports"},
  {"id":"124","name":"Mini Gifts Distributors Ltd."},
  {"id":"125","name":"Havel & Zbyszek Co"},
  {"id":"128","name":"Blauer See Auto, Co."},
  {"id":"129","name":"Mini Wheels Co."},
  {"id":"131","name":"Land of Toys Inc."}
]}

这些数据是通过以插件形式编写的PHP代码获得的，该代码采用JS代码中给出的url形式

http：//localhost/Akshay/REACT/testDataAPI.php？user = 2＆num = 10＆format =
json

我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>

    <script type="text/babel">


var UserGist = React.createClass({
  getInitialState: function() {
    return {

      username:[],
      companyID:[]
    };
  },

  componentDidMount: function() 
  {

    var rows = [];

   this.serverRequest = $.get(this.props.source, function (result) {

      for (var i=0; i < 10; i++) 
      {
            var lastGist = result.posts[i];
            //console.log(result.posts[i]);
            this.setState({
            username: lastGist.id,
            companyID: lastGist.name
            });
      }

     }.bind(this));

  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
            return (
        <li>{this.state.companyID} is the name {this.state.username} is the ID</li>
        );

  }
});


ReactDOM.render(
  <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
  document.getElementById('content')
);

    </script>
  </body>
</html>

阅读 231

2020-07-22

共1个答案

小编典典

使用地图渲染数据。并将json作为javascript对象存储在状态本身中，而不是存储在两个单独的数组中。

 <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/remarkable.min.js"></script>
    <div id="content"></div>

    <script type="text/babel">


var UserGist = React.createClass({
  getInitialState: function() {
    return {

     data: [{"id":"103","name":"Atelier graphique"},
  {"id":"112","name":"Signal Gift Stores"},
  {"id":"114","name":"Australian Collectors, Co."},
  {"id":"119","name":"La Rochelle Gifts"},
  {"id":"121","name":"Baane Mini Imports"},
  {"id":"124","name":"Mini Gifts Distributors Ltd."},
  {"id":"125","name":"Havel & Zbyszek Co"},
  {"id":"128","name":"Blauer See Auto, Co."},
  {"id":"129","name":"Mini Wheels Co."},
  {"id":"131","name":"Land of Toys Inc."}]
    };
  },

  componentDidMount: function() 
  {

  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
            return (
            <div>
        {this.state.data.map(function(item, index){
          return    <li>{item.name} is the company name, {item.id} is the ID</li>

        })}</div>
        );

  }
});


ReactDOM.render(
  <UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
  document.getElementById('content')
);

    </script>
</html>

JSFIDDLE

对于小提琴示例，我已在中删除了您的$.get()代码componentDidMount。

PS如小提琴示例所示，将状态数组数据创建为对象数组

2020-07-22