映射函数中的错误/对象作为 React 子项/React.js 无效

Question

我正在使用 React.js 制作应用程序。我使用 API 获取一些数据，并试图在列表中显示这些数据。目前，当我尝试遍历数据时收到以下错误。

对象作为 React 子级无效（找到：带有键 {USDUSD、USDEUR、USDCAD、USDAUD} 的对象）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查`Exchange

的渲染方法

即使我将数据存储在数组中，也会出现此错误。

我检查了有一个与此错误相关的类似线程：Objects are not valid as a React child，但这些答案对我的情况没有帮助。

这是我的代码。

import React from 'react';
import axios from 'axios';

const baseUrl = 'http://apilayer.net/api/historical?'
const API_KEY = 'API_KEY'
const date = '2017-10-22';
const currencies = 'USD,EUR,CAD,AUD';
const format = 1;


export default class Exchange extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        item : []
    };
}

componentDidMount(){
const url = `${baseUrl}${API_KEY}&date=${date}&currencies=${currencies}&format=${format}`
axios.get(url)
     .then(({data}) => {
        this.state.item.push(data.quotes);
        this.setState({
            item: this.state.item
        });
     })
     .catch((err) => {})
 console.log("item" + this.state.item)
 }

render() {
const rate = this.state.item.map((element, index)=>{
   console.log("element" + element)
return <div key={index}>
        <p>{element}</p>
        </div>
 }); 

    return (
        <div>
        <div>Exchange</div>
        <ul>Today's rate
        <li>{ rate }</li>
        </ul>
       </div>
        )
    }
 }

Answer 1

由于每个quote 都是一个对象，您可以使用Object.keys() 循环遍历.map() 中的对象以显示每个值。

const baseUrl = 'http://apilayer.net/api/historical?'
const API_KEY = 'API_KEY'
const date = '2017-10-22';
const currencies = 'USD,EUR,CAD,AUD';
const format = 1;
const quotes = {
  USDUSD: 1,
  USDEUR: 0.850499,
  USDCAD: 1.26377,
  USDAUD: 1.280799
};

class Exchange extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      item: []
    };
  }

  componentDidMount() {
    //const url = `${baseUrl}${API_KEY}&date=${date}&currencies=${currencies}&format=${format}`
    //axios.get(url)
    //.then(({data}) => {
    this.setState({
      item: this.state.item.concat([quotes])
    });
    //})
    //.catch((err) => {})
    //console.log("item" + this.state.item)
  }

  render() {
    const rate = this.state.item.map((quotes, index) => {
      return Object.keys(quotes).map(key => {
        return (
            <div key = {key} >
              <p>{quotes[key]}</p>
            </div>
          )
      })
    });

    return ( 
      <div>
        <div>Exchange</div> 
        <ul> 
          Today 's rate
          <li> {rate} </li> 
        </ul>
     < /div>
    )
  }
}

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

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