Question

我是新来的人。我尝试了许多不同的方法来呈现数据，但是它不起作用。我使用过地图，但是它不起作用，或者可能是我以错误的方式使用了它。

我已经使用启用了CORS的浏览器通过此命令在ubuntu中执行此操作。

google-chrome --disable-web-security --user-data-dir="/tmp/chrome_tmp"

我为此使用了地图，但它给出了错误。

import React, { Component }  from 'react';
import './App.css';
import Table from './components/Table.js';


class App extends Component {

  constructor(props) {

    super(props);

    this.state = {
      organizations: [],
      isLoaded: false,
    }
  }

  componentDidMount() {
    fetch('api call')
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        organizations:json,
      });
    },


    (error) => {
      this.setState({
        isLoaded: true,
        error
      });
    });
  }

  render() {

    var { isLoaded,organizations } = this.state;
    console.log(this.state.organizations);

    if (!isLoaded) {
      return <div>loading....</div>
    }

    else {
     return (
        <div className="App">
          {this.state.organizations.name}
        </div>
      );
    }
  }

}

export default App;

这是要呈现的数据：

{code: 0, message: "success", organizations: Array(4)}
  code: 0
  message: "success"
  organizations: Array(4)
    0:
       AppList: ["books"]
       account_created_date: "2017-07-04"
       account_created_date_formatted: "04/07/2017"
       can_change_timezone: true
       can_show_document_tab: true
       can_sign_invoice: false
       contact_name: "Siddharth Kothari"

Answer 1

请在下面找到手动使用organizations数组的工作代码，您可以在json方法中用organizations代替componentDidMount。

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      organizations: [],
      isLoaded: false,
    }
  }

  componentDidMount() {
    fetch('https://api.randomuser.me/?nat=us,qb&results=1')
    .then(res => res.json())
    .then(json => {
      const organizations = [
        {'name': 'something1' , key: 1},
        {'name': 'something2', key: 2 },
        {'name': 'something3', keyL: 3},
      ]
      this.setState({
        isLoaded: true,
        organizations:organizations,
      });
    },
    (error) => {
      this.setState({
        isLoaded: true,
        error
      });
    });
  }
  render() {
    const { isLoaded, organizations } = this.state;
    console.log(this.state.organizations);

    if (!isLoaded) {
      return <div>loading....</div>
    }
    else {
      return (
         <div>
         {organizations.length && organizations.map(value => {
           return (
             <div key={value.key}>
               {value.name}
              </div>
           )
         })}
         </div>
       );
     }
  }
}

render(<App />, document.getElementById('root'));

Answer 2

数组是类列表对象，数组的索引为零，数组的第一个元素的索引为0，而最后一个元素的索引等于数组的length属性的值减去1。使用无效索引数字返回未定义。给定以下数组

const arr = ['this is the first element', 'this is the second element', 'this is the last element'];

要打印第一个元素，您将使用索引0。

const arr = ['this is the first element', 'this is the second element', 'this is the last element'];

console.log(arr[0]);

要打印数组中的任何元素，请使用任何有效索引。

const arr = ['this is the first element', 'this is the second element', 'this is the last element'];

console.log(arr[1]);

如果使用无效的索引，则会得到undefined。

const arr = ['this is the first element', 'this is the second element', 'this is the last element'];

console.log(arr[3]);

您需要使用索引来访问数组中的元素，还可以使用条件渲染来显示数据，并且仅使用一个return语句。

render() {

  let { isLoaded, organizations } = this.state;
  console.log(typeof organizations);
  organizations = Array.isArray(organizations.organizations) && organizations.organizations || [];

  return (
    <div className="App">
      { !isLoaded 
          ? <div>loading....</div>
          : {this.state.organizations[0].contact_name}
      }
    </div>
   );
  }
}

要渲染所有项目，请使用.map()

map（）方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

render() {

  let { isLoaded, organizations } = this.state;
  console.log(typeof organizations);
  organizations = Array.isArray(organizations.organizations) && organizations.organizations || []; 

  return (
    <div className="App">
      { !isLoaded 
          ? <div>loading....</div>
          : <div>
             { organizations.map((organization, i) => <li key={i}>{organization.contact_name}</li>)}
            </div>
      }
    </div>
   );
  }
}

如何在反应中呈现此数据？

2 个答案: