如何获取API数据并在react.js中以表格形式显示

Question

Here is my code I'm not getting how to show data on the page. When I tried I got nothing on the page and it shows:

Warning: Each child in an array or iterator should have a unique "key" prop.

Here is my Code.

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

class App extends Component {
  constructor(){
    super();
      this.state = {
        data: []
        }
    }

    componentDidMount() 
    {
      fetch("https://blockchain.info/ticker").
        then((Response) => Response.json()).
          then ((findresponse)=>
            {
              console.log(findresponse)
              this.setState({
                data: [findresponse]
                  });
            }) 
    }

    render() 
    {
      return(
        <div>
          {
            this.state.data.map((dynamicData, Key) =>
              <div>
                <span>{dynamicData.key}</span>
              </div>
            )
          }
        </div>
        )
    }
}

export default App;

Answer 1

This is a react warning.

As per the docs :

A “key” is a special string attribute you need to include when creating lists of elements.

You are having an issue accessing the data returned from bitcoin as you have an array of objects. To access the data being returned from the API you need to do something like the following:

 class Example extends React.Component { constructor() { super(); this.state = { data: [] } } componentDidMount() { fetch("https://blockchain.info/ticker"). then(response => response.json()). then(findresponse => { this.setState({ data: [findresponse] }); }) } render() { return ( <div> { this.state.data.map((dynamicData, Key) => { let keys = Object.keys(dynamicData); let d = dynamicData; return keys.map(data => { return ( <div style={{borderBottom: '1px solid black'}}> <p>Currency: {data}</p> <p>Buy: {dynamicData[data].buy}</p> </div> ); }); }) } </div> ) } } ReactDOM.render(<Example />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

Is there anything wrong at all with your code or is it just a question about the warning message? If that's the case, whenever you map through an array in React, you have to give them a key prop. This is helpful so React knows which items have changed, updated or even added in the future.

// Key here stands for dynamicData's index in the array and not its key prop.
this.state.data.map((dynamicData, Key) =>
  <div key={Key}>
    <span>{dynamicData.key}</span>
  </div>
)

I suggest you to rename it from Key to index so you don't confuse keys within your code.

this.state.data.map((dynamicData, index) =>
  <div key={index}>
    <span>{dynamicData.key}</span>
  </div>
)

For more information about keys in React, I suggest you to read this link.