reactjs map中的this.state数组不是函数

Question

import React from 'react';
import AppCard from './AppCard'
import FlatButton from 'material-ui/FlatButton'

export default class Column extends React.Component {
  constructor() {
    super();
    this.state = {
      cards: []
    }
  }
  render() {
    return (
      <div>
        <h3>{this.props.name}</h3>
        <div>{this
            .state
            .cards
            .map(c => <AppCard>{c}</AppCard>)}</div>
        <FlatButton
          onClick={e => this.setState({
          cards: this
            .state
            .cards
            .push('asdf')
        })}>Add new card</FlatButton>
      </div>
    )
  }
}

按下我的FlatButton会导致

Uncaught TypeError：this.state.cards.map不是Column.render的函数（Column.js：21）

不确定底层问题是什么，因为cards绝对是地图：

Answer 1

这是因为你推动了this.state.cards。

相反，你可能会这样做：

var a = []
var b = a.push(1)
console.log(b) // logs 1 not [1]

这是因为push不会返回你推送的数组，而是返回你推送的值。

这样你的this.state.cards变成'asdf'

或者在控制台中键入以下内容，您就会明白为什么会发生这种情况。

{{1}}

Answer 2

.map功能仅适用于array。 看起来cards不是您期望的格式，因为当您按下FlatButton时，您将状态设置为Number。

this.setState({cards: this.state.cards.push('asdf')});

这会将卡设置为push函数返回的值，这是一个数字而非数组。