Question

我试图从here获取数据并使用react.js显示到我的页面但是在尝试运行代码时出错，显示错误＆＃34; TypeError：ticker .map不是一个功能＆＃34;。

这是我的代码：

class App extends Component {
constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    ticker: []
  };
}
componentDidMount() {
  fetch("https://vip.bitcoin.co.id/api/btc_idr/ticker")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          ticker: result.ticker
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
}
render() {
  const { error, isLoaded, ticker } = this.state;
  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {ticker.map(item => (
          <li key={item.name}>
            {item.high} {item.low}
          </li>
        ))}
      </ul>
    );
  }
}}

对不起，我是新手。

Answer 1

从API返回的Ticker是一个对象，而不是一个数组，并且您正在尝试映射一个对象，这会给您一个错误。您是否尝试将对象添加到阵列或只有一个对象。以下是我所说的话：

this.setState({
    isLoaded: true,
    ticker: result.ticker
});

如果您需要单个对象，请删除map函数并使用（render）：

 <li key={ticker.name}>{ticker.high} {ticker.low}</li>

但是，如果要继续将对象添加到数组中，只需执行以下操作（componentDidMount）：

this.setState({
    isLoaded: true,
    ticker: [...this.state.ticker, result.ticker]
});

Answer 2

https://vip.bitcoin.co.id/api/btc_idr/ticker返回一个json对象，而不是一个数组。

{
    "ticker": {
        "high": "154922000",
        "low": "148658000",
        "vol_btc": "479.49235295",
        "vol_idr": "72668242553",
        "last": "148659000",
        "buy": "148657000",
        "sell": "148659000",
        "server_time": 1517320859
    }
}

现在，您无法在对象上调用map函数。这就是你得到的原因

＆＃34; TypeError：ticker.map不是函数＆＃34;

所以，你可以做的第一件事是改变你的状态，如下所示，这是一个空的对象，而不是一个数组 -

this.state = {
    error: null,
    isLoaded: false,
    ticker: {}
  };

由于它只有一个对象而不是数组，因此可以按如下方式更改标记 -

<ul>   
  <li>{this.state.ticker.high} {this.state.ticker.low}</li>
</ul>

请注意，状态中的自动收报机对象在您获取之前是空的。

Answer 3

1）首先按以下方式将新数据推入状态

this.setState({
    isLoaded: true,
    ticker: [...this.state.ticker, result.ticker]
});

2）由于它是异步的，因此可能需要时间，此时可能无法获得数据。因此，在使用map之前检查状态数据。

return (
      <ul>
        {ticker && ticker.length > 0 && ticker.map(item => (
          <li key={item.name}>
            {item.high} {item.low}
          </li>
        ))}
      </ul>
    );

React js - fetch API - TypeError：ticker.map不是函数

3 个答案: