Fatal编程技术网
  • javascript/
  • Javascript REACT JS：映射要在JSX中渲染的对象数组

Javascript REACT JS：映射要在JSX中渲染的对象数组

javascript php jquery json reactjs

Javascript REACT JS：映射要在JSX中渲染的对象数组,javascript,php,jquery,json,reactjs,Javascript,Php,Jquery,Json,Reactjs,我是新手，问题是我需要在这段代码中显示数据库中的所有字段。我已经能够在浏览器控制台中以对象的形式获取所有数据，并且能够在浏览器中查看阵列中的最后一段数据，但无法查看它们。请原谅我在代码中的错误格式，因为我是新手。提前谢谢 输出和代码 浏览器视图： 玩具之地公司是名字131是ID JSON数据： {"posts":[ {"id":"103","name":"Atelier graphique"}, {"id":"112","name":"Signal Gift Stores"}, {"

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

输出和代码

浏览器视图： 玩具之地公司是名字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形式编写的插件

我的代码：

<!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>


反应教程
var UserGist=React.createClass({
getInitialState:函数（）{
返回{
用户名：[]，
公司ID:[]
};
},
componentDidMount:function（）
{
var行=[]；
this.serverRequest=$.get（this.props.source，函数（result）{
对于（变量i=0；i<10；i++）
{
var lastGist=结果.帖子[i]；
//console.log（result.posts[i]）；
这是我的国家({
用户名：lastGist.id，
companyID:lastGist.name
});
}
}.约束（这个）；
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(

  • {this.state.companyID}是名称{this.state.username}是ID
    • 
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);
    使用贴图渲染数据。并将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>

    
var UserGist=React.createClass({
getInitialState:函数（）{
返回{
数据：[{“id”：“103”，“name”：“Atelier graphique”}，
{“id”：“112”，“名称”：“信号礼品店”}，
{“id”：“114”，“名称”：“澳大利亚收藏家公司”}，
{“id”：“119”，“姓名”：“La Rochelle礼品”}，
{“id”：“121”，“名称”：“Baane Mini Imports”}，
{“id”：“124”，“名称”：“迷你礼品分销商有限公司”}，
{“id”：“125”，“姓名”：“Havel&Zbyszek公司”}，
{“id”：“128”，“name”：“Blauer See Auto，Co.”}，
{“id”：“129”，“名称”：“迷你车轮公司”}，
{“id”：“131”，“名称”：“玩具之地公司”}]
};
},
componentDidMount:function（）
{
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
{this.state.data.map（函数（项，索引）{
return
  • {item.name}是公司名称，{item.id}是id
    • 
})}
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);

    对于小提琴示例，我已经删除了
    componentDidMount
    中的
    $.get（）
    代码

    另外，创建状态数组数据作为对象数组，如 小提琴示例

    我想这对你会有帮助的

    <!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>

    
反应教程
var UserGist=React.createClass({
getInitialState:函数（）{
返回{
用户名：[]，
公司ID:[]
};
},
componentDidMount:function（）
{
var行=[]；
this.serverRequest=$.get（this.props.source，函数（result）{
var用户名=[]；
var companyID=[]；
对于（变量i=0；i<10；i++）
{
var lastGist=结果.帖子[i]；
//console.log（result.posts[i]）；
用户名.push（lastGist.id）；
companyID.push（lastGist.name）；
}
这是我的国家({
用户名：用户名，
companyID:companyID，
});
}.约束（这个）；
},
componentWillUnmount:function（）{
这是.serverRequest.abort（）；
},
render:function（）{
返回(
{this.state.companyID.map（函数（项，索引）{
return
  • {item}是公司名称，{this.state.username[index]}是ID
    • 
})}
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);
    我试图使用map渲染它，但它创建了一个错误，说它未定义，这将检查出您的解决方案并返回给您，感谢您的帮助help@AkshayVenugopal给出undefinedIt的方法是可行的，但我需要像API一样使用它，所以我应该如何继续在代码中给出JSON数据，我需要从batabase使用它与phpmyadminAlso类似，会弹出一条警告：“警告：数组或迭代器中的每个子级都应该有一个唯一的“键”属性。请检查UserGist中
    UserGist
    .in li（由UserGist创建）的呈现方法”类型错误：这是未定义的singleList（）render（）browser.min.js%20line%203%20%3E%20函数：52[36]你能描述一下这个错误吗？？行号：？？？这样我就可以看一看，而不是看一看。我已经编辑过了。希望它能起作用。