Question

这是我的代码我没有得到如何在页面上显示数据。当我尝试时，我在页面上什么都没有，它显示：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34; 丙

这是我的代码。

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

这是一个反应警告。

根据docs：

“key”是您需要包含的特殊字符串属性创建元素列表。

您在访问比特币返回的数据时遇到问题，因为您有一个对象数组。要访问从API返回的数据，您需要执行以下操作：

＆＃13;

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"));

＆＃13;

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

＆＃13;

Answer 2

您的代码是否有任何问题，或者只是关于warning消息的问题？如果是这样的话，无论何时在React中映射数组，都必须为它们提供key道具。这很有帮助，因此React知道将来哪些项目已更改，更新甚至添加。

// 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>
)

我建议您将其从Key重命名为index，这样您就不会在代码中混淆密钥。

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

有关React中keys的详细信息，建议您阅读this链接。

如何获取API数据并在react.js

2 个答案: