Question

我对React很陌生，所以我先创建一个简单的应用程序。对我来说它是一个简单的反应计时器我完成了计时器的基本功能，并希望继续使用API和状态。

我正在加载可用的＆＃34;最近的计时器＆＃34;从API中然后将minto置于状态并重新渲染。

现在，我为＃34;最近的计时器＆＃34;的每个条目都设有一个删除按钮。单击它，我收到错误消息：

TypeError: this.state.recentTimers.map is not a function
    at RecentTimers.renderRecentTimerItems (transformed.js:32399)
    at RecentTimers.render (transformed.js:32433)
    at transformed.js:28263
    at measureLifeCyclePerf (transformed.js:27543)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (transformed.js:28262)
    at ReactCompositeComponentWrapper._renderValidatedComponent (transformed.js:28289)
    at ReactCompositeComponentWrapper._updateRenderedComponent (transformed.js:28213)
    at ReactCompositeComponentWrapper._performComponentUpdate (transformed.js:28191)
    at ReactCompositeComponentWrapper.updateComponent (transformed.js:28112)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (transformed.js:28028)

我想到了绑定问题但无法解决问题。

这是组件：

import React, { Component } from 'react';
import Axios from 'axios';

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

export default class RecentTimers extends Component {

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

  componentDidMount() {
    Axios.get('http://rest.learncode.academy/api/svartberg/timers')
      .then((response) => {
        this.setState({recentTimers: response.data});
      })
      .catch(function (error) {
        UIkit.notification({
          message: 'Couldn\'t fetch recent timers.<br />' + error,
          status: 'danger',
          pos: 'bottom-right'
        });
      });
  }

  deleteRecentTimerItem(item) {
    Axios.delete('http://rest.learncode.academy/api/svartberg/timers/' + item.id)
      .then((response) => {
        this.setState({recentTimers: response.data});
      })
      .catch(function (error) {
        console.log(error);
        UIkit.notification({
          message: 'Couldn\'t delete timer with ID ' + item.id + '.<br />' + error,
          status: 'danger',
          pos: 'bottom-right'
        });
      });
  }

  renderRecentTimerItems() {
    return this.state.recentTimers.length > 0
      ? this.state.recentTimers.map((item, index) => (
        <li key={index}>
          {item.timestamp} ({item.seconds} Seconds)
          <span onClick={this.deleteRecentTimerItem.bind(this, item)} className="uk-float-right" style={{lineHeight: 'normal'}} data-uk-icon="icon: close"></span>
        </li>
      ))
      : <div className="uk-text-center"><span data-uk-spinner={''} /></div>;
  }

  render() {
    return (
      <div>
        <hr />
        <div className="uk-card uk-card-default uk-card-body">
          <h3 className="uk-card-title uk-text-center">Recent Timers</h3>
          <ul className="uk-list uk-list-divider">
            { this.renderRecentTimerItems() }
          </ul>
        </div>
      </div>
    )
  }

}

反应状态更新问题（sry，不能更具体地标题）

0 个答案: