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

IT技术 javascript php jquery json reactjs
2021-04-07 14:48:11

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

输出和代码

浏览器视图：Land 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/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/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>
2个回答

使用地图来呈现您的数据。并将 json 存储为状态本身中的 javascript 对象，而不是两个单独的数组。

 <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="css/base.css" />
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/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将状态数组数据创建为对象数组，如小提琴示例所示

也弹出警告
2021-05-24 14:48:11
“警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。检查UserGistUserGist中. in li（由 UserGist 创建）的渲染方法”
2021-05-25 14:48:11
@AkshayVenugopal 是什么给出了未定义
2021-06-05 14:48:11
我尝试使用地图来渲染它，但它创建了一个错误，说它是未定义的将检查您的解决方案并回复您，感谢您的帮助
2021-06-11 14:48:11
它有效，但我需要像 API 一样使用它，所以我应该如何处理这里的 JSON 数据在代码中给出我需要从像 phpmyadmin 这样的 batabase 使用它
2021-06-11 14:48:11

我认为它会帮助你。

<!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/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/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) {
      var username = [];
      var companyID = [];
      for (var i=0; i < 10; i++) 
      {
            var lastGist = result.posts[i];
            //console.log(result.posts[i]);
            username.push(lastGist.id);
            companyID.push(lastGist.name);
      }
      this.setState({
            username: username,
            companyID: companyID,
      });
     }.bind(this));

  },

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

  render: function() {
      return (
        <div>
    {this.state.companyID.map(function(item, index){
      return    <li>{item} is the company name,              {this.state.username[index]} 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>
  </body>
</html>
TypeError：这是未定义的 singleList() render() browser.min.js%20line%203%20%3E%20Function:52 [36]</ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext() react.js:6614 [36]</ReactCompositeComponentMixin。 _renderValidatedComponent() react.js:6641 [36]</ReactCompositeComponentMixin._updateRenderedComponent()
2021-06-02 14:48:11
不看看它。我已经编辑了它。它会很有希望地工作。
2021-06-04 14:48:11
你能描述一下错误吗？？行号：？？？好让我看看。
2021-06-16 14:48:11
其它你可能感兴趣的问题
上一篇坏处的等号导致未知令牌异常 下一篇React Redux 从后端方法获取数据