복붙노트

[REACTJS] JSX에서 렌더링 할 객체의 배열을 통해지도 : JS 반응

REACTJS

JSX에서 렌더링 할 객체의 배열을 통해지도 : JS 반응

해결법

  1. 1.를 사용하여 데이터를 렌더링하는지도. 상기 상태 자체 대신에 별도의 두 배열의 자바 스크립트 객체로서 저장 JSON.

    를 사용하여 데이터를 렌더링하는지도. 상기 상태 자체 대신에 별도의 두 배열의 자바 스크립트 객체로서 저장 JSON.

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

    바이올린 예를 들어 나는 componentDidMount에 $의 갔지 () 코드를 삭제했다.

  2. 2.그것은 내가 생각하는 당신을 도울 것입니다.

    그것은 내가 생각하는 당신을 도울 것입니다.

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

    3. from https://stackoverflow.com/questions/39150326/react-js-map-over-an-array-of-objects-to-render-in-jsx by cc-by-sa and MIT license

'REACTJS' 카테고리의 다른 글

[REACTJS] 구성 속성 문제-에서 turfJS의 구성 속성 시도?  (0) 2020.11.10
[REACTJS] mapStateToProps와 연결 사용할 때지도 '정의의' '속성을 읽을 수 없습니다'  (0) 2020.11.10
[REACTJS] - 만들기 - 앱 반작용 생산 빌드에서 프록시  (0) 2020.11.10
[REACTJS] react.js에 localStorage를 경청하는 방법  (0) 2020.11.10
[REACTJS] ReactJS에서 내보내기 (기본값) 클래스  (0) 2020.11.10
,

티스토리툴바