在reactjs地圖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結果：this.state.cards.map不在Column.render（Column.js的函數：21 ）

不知道什麼絕對的根本問題是因爲cards是地圖：

Answer 1

這是因爲你推上的第is.state.cards。

相反，你可以這樣做：

<FlatButton 
      onClick={e => this.setState({ 
      cards: [ ...this.state.cards, 'asdf'] 
     })}>Add new card</FlatButton> 

這是因爲推不回你推陣，但你推值。

使您this.state.cards變成「ASDF」

---

或鍵入下面的安慰，你就會明白爲什麼這種情況正在發生。

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

Answer 2

.map功能只適用於array。 它看起來像cards是不是你期待的格式，因爲當你推動FlatButton你設置狀態爲Number。

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

這會將卡片設置爲推送函數返回的值，這是一個數字而不是數組。